the JavaScript Code Photo by Dmitry Baranovskiy
ブログやWebサイトを見ていると「このサイトの機能いいなぁ」と思ったりすることがあります。当然盗作は「ダメっ、絶対」ですが、どんな風に実装しているのかな、という興味が湧くとコードを参考にしてみたいと思いますよね。
とはいえ、Webサイトに埋め込まれているJavaScriptファイルをそのまま見ても、圧縮されていて読みづらかったりします。
そこで、今回は圧縮されているJavaScriptなどを読みやすく整形してくれるWebサービスを紹介します。
Online JavaScript beautifier へアクセスっ
使い方はとても簡単っ！今回は、以前私が作成した「はてなフォトライフの画像ページからHTMLを生成するブックマークレット」をサンプルに、圧縮されたJavaScriptを見やすくしてみますね。
はてなフォトライフの画像ページからHTMLを生成するブックマークレット - tarのブログるっ by @tarVolcano
圧縮されたJavaScriptソースを用意する
それでは実際に試してみましょう。まず、上のリンク先にある「はてなフォトライフ2HTML」のリンクからJavaScriptのコードをコピーします。
下のスクショは上でコピーしたJavaScriptのコードをOnline JavaScript beautifier へ貼付けたところです。１行にギュッと詰まっていて読みにくいですね。
貼付けたら、整形を実行します。手順は下のスクショを参考に１〜２の順に行っていきます。
実行すると、下のスクショのように、整形されたコードが表示されます。これなら読みやすいですね。
あとがき
ブログサイトを運営していく上では、やはりHTMLやJavaScript、CSS等のスキルがあった方がより良いサイトが作れるわけです。
今回紹介したWebサービス「Online JavaScript beautifier」はエンジニア向けではありますが、ブログサイト運営をするかたも、使い方次第で活用出来ますので、是非お試しくださいね。
