Olein編集部にCODAとドットインスクールがやってきた!


ホワイトクリスマスになったところもあったのでしょうか?年末年始にむけてやりたいこと満載なOlein編集長(@Olein_jp)です。こんばんわ。

今年の年末年始はがっつり自分の勉強の時間に使えれば嬉しいなぁと、いまから準備に取り掛かっています。その第一歩としてPANIC社さんのCODAというテキストエディタを導入しました。

以前からかなり気になっていたテキストエディタなのですが、満を持して導入することになりました。

なぜそんなに急に導入することになったかと言いますと、素晴らしい学習サイトを見つけてしまったからです。そうです。皆さんご存知のドットインスクールです。

3分動画でマスターするプログラミング学習サイト – ドットインストール
3分動画でマスターする初心者向けプログラミング学習サイト

こちらのサイトを知ったのは男子ハック様の記事がきっかけでした。今まで一から勉強し直そうとは、かねがね思っていたのですが、なかなか行動に移せずもぞもぞしていました。ドットインスクールを紹介してくれた記事はこちらです。

HTMLからツイッターbotの作り方まで無料で教えてくれるプログラミング学習サイト『ドットインストール』が素敵 * 男子ハック
プログラミングってハードルが高いイメージです。今でこそ何となくわかったり使えるようになったHTMLやCSSも最初は意味不明な文字の羅列でした。そんなプログラミング言語を無料でしかもわかりやすく教えてく …

こんなきっかけでCODAを思っていたよりも早く導入することになりました。良い意味で、背中を押してもらった感じです。

CODAをダウンロード

まずはパニック社さんのサイトへ行きましょう。こちらのサイトもアプリの設計と同様にスタイリッシュですね。

パニック・ジャパン – Coda – Mac OS X 用 シングルウインドウ Web 構築環境
Web サイトの構築中、それまでのワークフローは実に不安定であることに私たちは気付きました。まずテキストエディタを開き、保存されたファイルを Transmit でサーバにアップロードします。Safar …

こちらの画面左上からダウンロードを開始します。クリックと同時にダウンロードが開始されます。まずは体験版を使いこなしてからの購入ですよね。ボクはその方向で行きたいと思います。

ダウンロードが完了したら、そのデータを解凍し起動します。最初はこんな画面でした。

早速動かしてみる

早速、作業環境を作ってみます。デフォルトの画面設定では左上にファイルマネージャが表示されています。そこから任意の場所を選んで動作させる専用のフォルダを作りました。

下図のように使用する言語を選びます。基本はHTMLになっていると思いますが、こちらで確認してみましょう。

ボクが一番気になっていた機能の一つがこれです。クリップをこちらで保存して置けるんです。Dreamweaverでいうとスニペットみたいなものでしょうか。こちらを活用してのエディティングが僕の憧れていたスタイルだったのです(偉そうに…)。

Dreamweaverでも実装していますが、ボクは自動補完が欲しくて欲しくてたまらない人だったんです!なので、CotEditorなどを利用するときにでも、文章を書くのはいいんですが、スクリプトを書くときにはどうしても自動補完が欲しくなってしまいます。当然、CODAにも実装されております。

この年末を過ごすであろう理想的な学習スタイル画面をご紹介!


早速画面を紹介してしまいます。

まず、画面左にブラウザでドットインスクールを表示しています。右半分にはCODAを起動し、上をスクリプト、下をプレビューで使います。

試してみたんですが、この環境はとてつもなく学習効率が良くなります。

ブラウザでドットインスクールの動画を見ながら、CODAでスクリプトを打ち込みながら確認します。当然、動画のスピードには追いつけない場合もでてきますので、その際には動画を一旦停止し、スクリプトを打ち込み動作を確認。理解したら動画を再生する。の繰り返しです。これ、本当にオススメですよ。めくるめく夜を過ごせそうです。

他にもたくさんのTipsサイト様のスクリプトを見ながら動作させて確認する。そういった学習にも完璧に対応してくれると思いますし、これは使える!と思ったコードなどはすかさずクリップで保存しておきます。そうすれば、いつか使いたいと思ったときに、ネットでページを探し当てる時間をなくし、大幅に作業スピードを削減してくれるでしょう。

まとめ

当面はこのような環境で鍛錬を積みたいと思います。CODAの自動補完とクリップ機能を駆使しながら、この年末年始に学習を進めたいと思います。ボクのように、一度基本を勉強しなおしたい!という方々も多いと思います。そのような方の手助け記事になれば幸いです。

一番最後になりましたが、ボクにCODAの素材を教えてくれた@webcreatorboxさんのこちらの記事を紹介したいと思います。とても感謝しています。この場を使ってなんですが、ありがとうございます。

DreamweaverからCodaに変えました | Webクリエイターボックス
Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか?きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザ …

さて。勉強、がんばるぞよぉぉ〜!