ひよっこエンジニアの雑多な日記

とあるプログラミングスクールで働くひよっこエンジニアが覚えたことや悲しみを記すブログ

ドットインストールで快適に学習するために『Dotinstall Pane』を使ってみた

プログラミング初心者の強い味方といえば『ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト』がありますね。

動画を見ながらプログラミングを学習するサイトで、学べる内容が豊富でどれから手をつければいいのかしら?となるうれしい悲鳴が上げられる感じのサービスです。
学習の方法としては動画でやっていることを写経して、実行してを繰り返す感じ。
ただ写経して、実行のためにブラウザを立ち上げて〜という動作を繰り返すのは割とだるい印象。

ただ最近ドットインストールのメルマガで『dotinstall-pane』なるものを知り、取り入れてみたところ結構便利だったので紹介していこうかと思った次第。

Atomをインストールする

まず『dotinstall-pane』はテキストエディタAtom』のプラグインなので『Atom』を導入する。

自分はMacを使用しているのでMacのインストール方法を記載する。

  1. 公式サイトにアクセスする。http://atom.io/
  2. 公式サイトにある『Download For Mac』ボタンをクリックする。
  3. ダウンロードしたファイルを解凍する。
  4. 解凍したファイルをアプリケーションフォルダに配置する。

これでインストールは完了!

windowsの場合は以下のサイトが参考になります。
Windows - テキストエディタ「Atom」のインストール - 開発メモ - Webkaru

また『Atom』はデフォルト英語なので、日本語化したい場合は以下を参考にすると良さげ。
Atom の日本語化パッケージ "Japanese Menu" を作りました - syonx

『Dotinstall Pane』を導入する

Atom』のインストールが完了したら本題の『dotinstall-pane』を導入する。
※日本語化を行っているので操作項目がデフォルトの状態とは若干異なります。

まずAtomを起動し、ツールバーの『Atom > 環境設定』を選択する。
f:id:kimuraysp:20160214123051p:plain

環境設定画面に遷移したら、サイドバーから『インストール』をクリックする
f:id:kimuraysp:20160214123351p:plain

その後パッケージの検索バーに『dotinstall』と入力しエンターを押すことで検索をかける。
検索をかけると『dotinstall-pane』が出てくるので『install』ボタンをクリックしてインストールする。

これで『Dotinstall Pane』の導入完了です!

『Dotinstall Pane』を使用する

さて導入が終わったらいよいよ使ってみる!

使用方法はすごく簡単で

Macなら『Option + Shift + D』
Windowsなら『Alt + Shift + D』

上記のキーをエディタ画面で押すだけ!!
f:id:kimuraysp:20160214124457p:plain

するとエディタの横にドットインストールの画面が出てきちゃいます!
これで動画みながら学習が効率よくできるようになります!

さらに便利にするために

公式ブログ『http://blog.dotinstall.com/post/139045656660/dotinstallpane』にもありますが、『atom-html-preview』を導入すると学習効率がかなり上がります。

atom-html-preview』ってなんぞやとなりますが、これはエディタ上でショートカットキーを押すことでブラウザでの見え方を簡単に確認できるプラグインです。

導入方法は『Dotinstall Pane』と同様にツールバーの『Atom > 環境設定』と進み、サイドバーで『インストール』を選択する。
その後検索バーに『atom-html-preview』と検索して、『install』ボタンをクリックしてインストールします。
[f:id:kimuraysp:20160214125708p:plain

使用方法はエディタでHTMLを記述して、
f:id:kimuraysp:20160214130114p:plain
(このソースはjQuery入門第6回授業のものになります)

エディタにフォーカスを当てつつ、ショートカットキー『Ctrl-Shift-H』を入力するだけ!
f:id:kimuraysp:20160214130414p:plain
するとピョロっと右側にブラウザでの見え方が表示されます!

この二つのプラグインを導入することで学習効率がすごい上がった気がします!
特にHTML,CSS,javascript系の学習効率が跳ね上がります。

プログラミングに興味がある人はこれを導入して学習を始めるのもありっぽいかも。