IT未経験のバンドマンがプログラマーを目指して。Maker」を紹介します。MakerはWeb制作や開発において、欠かせない存在だと思います。Makerを試してみてね!」と公言しています。Makerはブラウザ上でHTML,CSS,Javascriptのコーディングをリアルタイムで行うことが出来る環境のことです。このような環境の事を、プレイグラウンドと言ったりします。コーディングすると、画面上にリアルタイムにコード内容が反映され、HTMLの枠組みや、CSSでのレイアウト、JavaScriptでの動きなどを確認することが出来ます。作成したコード内容を保存しておいて、部品ごとに使えるようにして置いたり、備忘録としても使えます。CodePenでは作成したコードを公開できるので、世界中のプログラマー、クリエイターのコードを見たり、自分のコードを見せたりすることが出来ます。Makerの凄いところは、オフラインで使える所です。Makerはchromeブラウザの拡張機能なので、ネットに繋がっていなくても使うことが出来るのです。ネット環境が無かったり、接続状況が良くない時などでもスピーディーにプレイグラウンド環境でのコーディングが可能なのです。Maker公式ページに飛びましょう。CHROME」がありますのでクリックしましょう。クリックするとポップアップが表示されますので、「拡張機能を追加」をクリックします。Maker」という歓迎のお言葉とともに機能の説明が書いてあるモーダルウィンドウが開かれます。これで拡張機能の追加は完了になります!!モーダルの説明を左から一つづつ見ていきましょう。Makerを立ちあげる時はブラウザ右上のアイコンを押して下さいとあります。拡張機能を追加するとchromeブラウザのアドレスバー右側当たりに、WebMakerのアイコンが追加されていることと思います。これで、chromeさえ開けばWebMakerを使うことができます。2歯車アイコンのカード設定やカスタマイズなどの変更は画面右下の歯車マークを押して下さいとあります。初めは初期設定で良いと思いますが、慣れてきたら自分の使いやすいようにカスタマイズ、設定していくといいかもしれません。3TwitterアイコンのカードWebMakerの公式Twitterをフォローして、最新の機能や情報をみよう!とあります。今後使って行くことを考えると、フォローしておくといいかと思います。使い方では、ここからは使い方を見ていきましょう。Would」をconsole.logで表示する簡単なコードを書いてみました。オフラインなので、書いた瞬間即座に反映されます。レスポンス抜群ですね。今の例ですと、画面が左右に分かれています。左側がコードを書く画面、右側がコードの結果表示画面になっています。コードを書く画面は、上からHTML,CSS,JavaScriptに分かれています。それぞれ大きさを変更することが出来るため、パート事にコードを書いていくのもやりやすいです。JavaScriptのコンソール画面は、右下のボタンを押すとアコーディオンで出てきます。Would」が表示されている事が確認できます。コンソールでのデバッグもやりやすいですね。作成したコードは簡単に保存することが出来ます。作成中のコードに名前を付けましょう。自分が分かるような名前に変更しておくと、後で開く時にわかりやすいと思います。12-12-13:48」になります。今回、このコードを「test」として保存します。画面右上にある「SAVE」ボタンをクリックするとあっとゆう間に保存完了です。保存されているか、「LOAD」ボタンで確認してみましょう。「OPEN」ボタンを押すと画面右側から保存中のコード一覧が表示されます。先ほど保存したコードがちゃんと保存されている事が確認できます。ココが便利!!プリプロセッサーのサポートプリプロセッサーとは、凄く簡単にゆうと、ど〇えもんのひみつ道具「ほんやくこんにゃく」のようなものです。コード入力画面のHTML、CSS、JavaScriptそれぞれの横に「▼」プルダウンメニューがあると思います。そこをクリックすると各対応のプリプロセッサーを利用することができます。TypeScriptに対応しており。設定することなく、利用したいプリプロセッサーを選択するだけですぐに利用できます。LIBRARY」をクリックすると、ライブラリの追加画面が表示されます。みなさんお馴染みの、jQuery等のJavaScriptライブラリーはもちろんのこと、Bootstrap、Animate.css、今ではデザイン観点では欠かせないFontAwesome等のCSSライブラリーも利用することができます。Bootstrap4βにも対応していますね!!さらに、セレクタメニューに載っていないライブラリも、テキストエリアに入力すると自動で候補が表示されます。画面下のCodePenのロゴマークをクリックすると、今まで記述したソースをそのままCodePenへ移行してくれます。CodePenでは書いたコードを公開できるので、引き続きCodePenで編集してそれを公開したりなど出来ます。画面下のCodePen左側の下矢印ボタンをクリックすると、コーディングしていたソースをHTMLファイルとしてダウンロードすることが出来ます。CSSとJavaScriptはHTMLの中に書かれた状態で吐き出されます。Makerは今後フロントエンドや講演会などでかなり活躍しそうです。中でもオフラインで使える強みはかなり大きのではないかと思います。学校・勉強会でコードの書き方を説明する時、実際にコーディングしながら説明する時など。通信環境に不安がある時は大活躍しそうです。CodePenとの互換性もあるので、今までCodePenを使っていた方も、WebMakerを使ってみてはいかがでしょうか。普段のWeb制作の学習用にもかなり便利だなと思います。HTML、CSS、JavaScriptの勉強はしやすいですし、ちょっとしたコードテストなどもプレイグラウンドで試せるので、毎日の練習用エディターとして使うといいのかな思います。便利機能として紹介したプリプロセッサーや、プラグインなども初期設定不要ですぐにどのように動作するのかが試せるので、プロジェクトのプロセッサー、ライブラリ選定なども行うことができると思います。コンポーネント単位や、部品単位、よく使うパーツごとなどに分けてコードを保存しておけるのも素敵です。自己紹介m0nch1(yu-ta)IT業界に飛び込んだドラマー。ドラムを叩きながら、いっぱしのプログラマーになるために日々奮闘中。利用規約お問い合わせIT未経験のバンドマンがプログラマーを目指して。IT未経験のバンドマンがプログラマーを目指して。