paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説!

f:id:paiza:20170106111720j:plain
どうも、まさとらん(@0310lan)です。

今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います!

特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。

BeautifyConverter

f:id:paiza:20170106111812j:plain
「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。

登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう!

■基本的な使い方!

BeautifyConverter」の基本的な使い方を実際に試しながら、どのようなサービスなのかを見ていきましょう!


まず、サイトにアクセスすると利用可能な「ミニツール」一覧が表示されているので、使いたいツールを選択します。

試しに、JavaScriptファイルを圧縮できる「JavaScript Minifier」をクリックしてみましょう!
f:id:paiza:20170106111839j:plain


すると、専用のエディタが別タブで起動するのが分かります。
f:id:paiza:20170106111847j:plain

JavaScriptファイルは、エディタに直接書いたりコピペしても良いし、自分のPCにあるファイルを指定したりネット上にあるURLを指定することも可能です。


あとは、「圧縮」ボタンをクリックするだけでOK!
f:id:paiza:20170106111858j:plain


大幅にファイルサイズが圧縮されました!
f:id:paiza:20170106111908j:plain


同じ要領で、HTMLファイルも圧縮したり…
f:id:paiza:20170106111916j:plain


CSSファイルを圧縮することも簡単です!
f:id:paiza:20170106111927j:plain


また逆に、圧縮されたJavaScriptファイルを整形して標準スタイルに戻すのも一瞬です。(HTML,CSSも同様です)
f:id:paiza:20170106111935j:plain
「ファイルが少し崩れて読みにくい…」というような場合にも有効ですね。


さらに、CSSをもっとプログラマブルに書ける「LESS」や「Stylus」を、通常のCSSに変換することも出来ます。
f:id:paiza:20170106111945j:plain
他にも、JSONXMLSQLなども圧縮や整形が簡単に出来るようになっているので便利です。


このように、利用したいツールを選択するだけで、ブラウザ上から専用エディタですぐに作業ができるのは便利でお手軽と言えるでしょう。

■ファイルの「変換」機能を使ってみよう!

さて、「BeautifyConverter」の基本的な使い方が分かったところで、このサービスの「得意技」とも言えるファイルの「変換」機能を試してみましょう!

非常に幅広いバリエーションが用意されているので、いくつかピックアップしてご紹介してみます。


例えば、「CSV」⇔「JSON」相互変換ツールで、CSVJSON形式にしたりその逆も簡単に処理できます。
f:id:paiza:20170106112003j:plain


CSV」⇔「HTML」変換を使えば、テーブル要素をサクッと取得できたり、逆にテーブル要素からCSV形式にすることも出来ます。
f:id:paiza:20170106112012j:plain


JSON」⇔「SQL」変換は、JSONSQL形式にしたり、SQLのデータをWebで扱いやすいJSONに変換してプログラミング出来ます。
f:id:paiza:20170106112024j:plain


また、ちょっと強引ですが「HTML」⇔「JavaScript」の相互変換も可能です。
f:id:paiza:20170106112036j:plain
ちなみに、「HTML」に関しては、他にも「Jade」「JSP」「PHP」「Perl」などに変換することも可能だったりします。


RSS」→「JSON」変換ツールを使うと、RSSフィードでよく使うXMLを扱いやすいJSONへと変換することが出来ます。
f:id:paiza:20170106112045j:plain


「HTML」⇔「テキスト」変換は、普通の文書をHTMLにしたり、逆に特定のHTML要素をテキスト文書へ簡単に変換できます。
f:id:paiza:20170106112054j:plain


さらに、「JSON」→「PDF」変換を行うと、JSONファイルを整形して見やすい「表」にした後にPDFファイルとして書き出すことも可能です。
f:id:paiza:20170106112103j:plain
もちろん「JSON」だけでなく、「CSV」「TSV」「SQL」「Excel」などをPDF変換することも出来るので便利です。

他にも、ファイル変換系のツールは豊富に揃っており、これだけでおよそ80種近いバリエーションが用意されているのは面白いところでしょう。

■まだまだある、こんなツール群!

サイトの機能一覧を見ていると、他にもユニークなツールが用意されているのが分かると思います。


例えば、「JavaScript」「CSS」「XML」「JSON」「YAML」などを正しく記述できているかの構文チェッカー
f:id:paiza:20170106112122j:plain


Webサイトの「アクセス制限」「リダイレクト」「認証」などを記述する.htaccess」ファイルを簡単に生成できるツール
f:id:paiza:20170106112130j:plain


画像ファイルを「文字データ(Base64)」に変換して、直接HTMLに埋め込んだりできるジェネレーター
f:id:paiza:20170106112138j:plain


PCブラウザはもちろんのこと、スマホからでもWebサイトのソースコード」を簡単に閲覧できるビューアー
f:id:paiza:20170106112147j:plain


さらに、100種類以上のシンタックスハイライトに対応した「オンラインコードエディタ」まで用意されています。
f:id:paiza:20170106112157j:plain
他にも、「単位変換」「URLのエンコード&デコード」「セキュアなパスワード生成」「IPアドレスドメイン情報の取得」「JPG」⇔「PNG」⇔「GIF」⇔「BMP」ファイルの相互変換…など、すべてを紹介できないくらい多くのツールがまとまっているのが大きな特徴と言えるでしょう。


慣れてくると、お気に入りのWebサイトを読み込んで「ソースコード」を表示し、そこから任意の情報だけをJSONにして「表」に整形してからPDF変換するような作業も、すべてブラウザ上で簡単に出来るようになるので便利ですよ。

■初心者でも動画でプログラミングが学べる!paizaラーニング公開中!

f:id:paiza:20160830130051j:plain
paizaでは、未経験者でも動画を通してプログラミング等が学べる「paizaラーニング」を公開しております。

paizaラーニングでは、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくプログラミングを教えてくれます。「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なくプログラミングを習得することができます。

paiza.jp

■まとめ

今回ご紹介した「BeautifyConverter」は、普段からコンソール画面でコマンドを叩いて作業することに慣れていない方でも、ファイルの圧縮・整形・変換などをブラウザから利用できるため、プロトタイプなどちょっとした作業にも最適ではないでしょうか。


個々のツールは、ネットで探すと見つけることは出来ますが、これだけ多くのツールを1つにまとめているのは珍しいので、ブックマークしていつでも利用できる状態にしておくと良いかもしれません。

ぜひ、みなさんも一度トライしてみてください!




paizaではスキルのあるエンジニアがきちんと評価されるようにし、技術を追い続ける事が仕事につながるようにする事で、日本のITエンジニアの地位向上を図っていければと考えています。特にpaizaではWebサービス提供企業などでもとめられる、システム開発力や、テストケースを想定できるかの力(テストコードを書く力)などが問われる問題を出題しています。

テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp