読者です 読者をやめる 読者になる 読者になる

tarのブログるっ by @tarVolcano

メガネ男子のtarが書くブログです。

圧縮されたJavaScriptを読みやすく整形するWebサービス

the JavaScript Code
the JavaScript Code Photo by Dmitry Baranovskiy

ブログやWebサイトを見ていると「このサイトの機能いいなぁ」と思ったりすることがあります。当然盗作は「ダメっ、絶対」ですが、どんな風に実装しているのかな、という興味が湧くとコードを参考にしてみたいと思いますよね。

とはいえ、Webサイトに埋め込まれているJavaScriptファイルをそのまま見ても、圧縮されていて読みづらかったりします。

そこで、今回は圧縮されているJavaScriptなどを読みやすく整形してくれるWebサービスを紹介します。

スポンサーリンク

Online JavaScript beautifier へアクセスっ

Online JavaScript beautifier

使い方はとても簡単っ!今回は、以前私が作成した「はてなフォトライフの画像ページからHTMLを生成するブックマークレット」をサンプルに、圧縮されたJavaScriptを見やすくしてみますね。

はてなフォトライフの画像ページからHTMLを生成するブックマークレット - tarのブログるっ by @tarVolcano

圧縮されたJavaScriptソースを用意する

それでは実際に試してみましょう。まず、上のリンク先にある「はてなフォトライフ2HTML」のリンクからJavaScriptのコードをコピーします。

20140508233315


下のスクショは上でコピーしたJavaScriptのコードをOnline JavaScript beautifier へ貼付けたところです。1行にギュッと詰まっていて読みにくいですね。
貼付けたら、整形を実行します。手順は下のスクショを参考に1〜2の順に行っていきます。

20140508232212


実行すると、下のスクショのように、整形されたコードが表示されます。これなら読みやすいですね。

20140508232213

あとがき

ブログサイトを運営していく上では、やはりHTMLやJavaScript、CSS等のスキルがあった方がより良いサイトが作れるわけです。

今回紹介したWebサービス「Online JavaScript beautifier」はエンジニア向けではありますが、ブログサイト運営をするかたも、使い方次第で活用出来ますので、是非お試しくださいね。

  • このエントリーをはてなブックマークに追加