-
HTML&CSSの勉強を効率的にするツール「オンラインエディタ」のすすめ
HTML&CSSの学習には、テキストエディタとブラウザが必要だ。関連書籍や既存サイトなどのソースコードを真似るようにテキストエディタに記述する。それをブラウザで動作確認する。これがHTML&CSS学習の一連の流れである。 しかしそれぞれツールを用意したり、起動させたり、と面倒くさくはないだろうか。 たとえば関連書籍の一項を写経するにしても、数行程度で済むわけだが、HTML,CSSファイルそれぞれを保存するなど煩わしい。そのために毎度styleタグやインラインスタイルで書くのも余計な作業である。 ましてやモニターサイズに制限があって広々と作業できないのならば、ツール切り替えが発生して効率悪い。エディタ記述して、ブラウザ見て、またエディタ、といった具合だ。 この工程に違和感やフラストレーションを感じているあなたならば、活用してもらえるであろうオンラインエディタなるツールを紹介したい。 オンラインエディタとは オンライン上でHTML&CSSなどを記述、動作確認が行えるツールのこと。ブラウザでサービスのURLにアクセスすることで利用可能だ。別段アカウントを作成する必要はないが、勉強した内容をアーカイブしておけるためユーザー登録するのも良い判断だろう。 特徴 HTML&CSS,JavaScriptの記述 動作確認がシームレス 記述内容のアーカイブ 記述内容のシェア機能 フレームワークやライブラリの読み込み 使い方 いくつかあるオンラインエディタから「JSFiddle」をピックアップしてみよう。これは私が比較的よく使用するオンラインエディタであるが、ほかにも候補があるので興味があれば検索してみてほしい。 https://jsfiddle.net/ まずJSFiddleにアクセスすると、上部に青いバーが目につく。ここにはテンプレートが用意されている。ボタンをクリックすれば、下部エディタにソースコードが反映すると同時に動作確認することができる。一定の記述があり、勉強の取っ掛かりとして役立つかもしれない。 HTML,CSS,JavaScriptのフレームが設けられていて、ここがエディタとして機能する。HTMLフレームにあたっては、htmlタグやbodyタグで梱包する必要がない。つまりdivタグやh1タグ、pタグなどから書き始められる。 動作確認は、逐次「Run」ボタンをクリックする。Runボタンは、上部メニューバー左に配置されている。記述がシームレスに反映するオンラインエディタもあるが、検証したいソースコードが即座に描画されると煩わしい処理もある。そのようなことから私は、使いづらさなど感じたことはない。 まとめ ご覧のようにHTML&CSS学習を強力にサポートするオンラインエディタであるが、さらに他人のソースコードをダッシュボード上に保存しておける。この機能も大変有り難い。結局のところ学習期は、他人のソースコードがもっとも優れた教材なのだと思う。 オンラインエディタは、あなたの学習を効率化して、習得を加速させるツールになるはずだ。
-
Markdownエディタ「Typora」「boostnote」どっち使ったらいい?比較してみた
私はいま、Typoraかboostnoteかで悩んでいる。これらはMarkdownエディタあるが、より使い勝手のいいツールを求めてエディタ沼にハマってしまっているわけだ。 このところライティングするようになって、Markdownエディタの重要性を再認識している。Markdownエディタを使う理由は、なんといっても骨子を組み立てる段階で意味付けできることだろう。 マークアップエンジニアにとって慣用語の「セマンティックWeb」に似ていなくもない。アウトラインを構成し、コンテンツに意味をもたせ、書き手読み手に正しく理解してもらう思想は馴染み深く感じてしまう。 Markdownエディタに求めることは、効率がよく記述を続けられて、意識を妨げないことだろう。操作に意識が割かれてアイデアが遮られるようであってはならない。 これは記事に起こして比較してみようではないか。と考えた次第である。この主題に興味がもてるようならば、お付き合いいただき参考にしてもらえると有り難い。 Markdownエディタとは Markdownエディタとは、Markdown記法に対応したテキストエディタのことでプレビュー機能が備わっている。意味付けした要素にスタイルが適用されて確認できる機能だ。 テキストドキュメント作成に重宝することから、ビジネスパーソンに広く利用される。エンジニアにも、Markdown記法は浸透していてREADME.mdを作成するシーンには欠かせないツールになっている。 テキストドキュメントの用意に際して、エクスポート機能を備えたエディタもある。別ファイル形式で共有するニーズに応えたものだろう。アジェンダや議事録の共有に役立ちそうだ。 Typora vs boostnote Markdownエディタについて、理解を深めることができた。それではさっそくTyporaとboostnoteを比較してみよう。 トレンドで比較 どちらとも言えない接戦を観せている。平均値ではboostnoteに軍配が上がるが、今日現在ではわずかしか違わない。当エントリーに興味を寄せるあなたにおいても、この程度の点差では判断しかねることだろう。 そもそもモノゴトは、平均値で傾倒するわけではない。いずれかの特徴が基になっていつの間にか常用しているのではないだろうか。 チャートを注視してみるとそれぞれに特徴があることがわかる。 boostnoteは、比較的一定を保ち推移している。一方のTyporaは、ときどき活気を見せる。 検索結果ボリュームで比較 Typoraの関連ページがボリュームで勝っている。boostnoteより3.5倍超インデックスされていて関心の高さが窺える。 これはTyporaのローンチ時期が大きな要因だろうと思う。先行によるリードは侮れない。 しかしながらGoogleいわく、「検索結果ボリュームは正確な数値ではない」と明示している。あてにならない数字ということだ。 とはいえ漠然と関心を寄せた人が、boostnoteよりTyporaが多いことは確かなようだ。 UIで比較 双方ともにカラムレイアウトで、エディタとしては一般的なインターフェースをしている。boostnoteの左カラムは開閉式になっていて、閉じたときの雰囲気はTyporaと変わりないように見える。 いずれにしてもエクスペリエンスを感じることができる。UIが作り込まれているからこそ質の高いUXを提供できるのだろう。 ツールとのコミュニケーションが得やすいというのは、エクスペリエンスが高い所以である。なにができるのか、なにをしてくれるのか、これからなにが発生するのか、ツールと話せることが重要だ。 たとえば、話題が噛み合う人物とのやり取りを想像してみてほしい。モチベーションの高い人物とのコミュニケーションは、ワクワクさせてくれる。そこから得られるエクスペリエンスは少なくない。 このように質の高いツールとならば良い関係を築ける。Typoraとboostnoteにはその資質があるのではないだろうか。 機能で比較 これまでトレンド、検索結果ボリューム数、UIで比較してきた。とはいえもっとも気になるのが機能面だろう。 互いにポイントとなる事柄をリストアップしてみた。 Typora OS依存なし 常時シームレスプレビュー ソースコード/タイプライター/フォーカスモードがある エクセル&スプレッドシートの表組みをコピペできる スクリーンショット機能がある 複数テーマが用意されている コードブロックがシンタックスハイライトされる メニューバー項目が日本語 boostnote OS依存なし ライブ/シームレスプレビューの切替ができる 「Markdown note」と「Snippet Note」がある Snippet Noteにソースコードをメモ書きしておける Snippet Noteはインデントおよびタブサイズを設定できる コードブロックにコピーボタンがある コードブロックに色の対比があって判別しやすい 国産 UIにおいては、それほど違いを感じなかった両ツールだが、機能面ではちゃんと個性をアピールしているのがわかる。…
-
[gibo] Gitの無視ファイルgitignoreを一瞬で作る方法
みなさんは普段どのようにgitignoreを作成していますか? 手作業で設定したり、GitHubのテンプレートから持ってきたり、前に使ったものを流用したりなど、様々な方法があるかと思いますが、 もしこのような方法で作成している方には「gibo」というツールをオススメします。 https://github.com/simonwhitaker/gibo インストール Mac環境であればHomebrewでインストールできます。 使い方 gibo listを実行すると対応する言語、フレームワークが表示されます。 だいたいの言語やメジャーなフレームワークであればリストに含まれているかと思います。 gitignoreを作成するにはdumpコマンドを使います。 以前はdump無しで良かったのですがアップデートで変更されたようです。 gibo dump NodeとするとNode.jsのgitignoreを出力します。 Railsであればgibo dump Railsのように使用する言語、フレームワークを指定しましょう。 これを.gitignoreファイルに書き込みます。 これでNodeの.gitignoreファイルが作成できます。 まとめ giboは https://github.com/github/gitignore を参照してgitignoreを作成しているようなのでgitignoreの内容も問題ないと思います。 私は以前から使用していたのですがあまりメジャーではないようでしたので紹介させて頂きました。 今まで手作業でgitignoreを作成していた方は、ぜひ使用されてみてはいかがでしょうか。