paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

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
他にも、JSON・XML・SQLなども圧縮や整形が簡単に出来るようになっているので便利です。


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

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

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

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


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


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


「JSON」⇔「SQL」変換は、JSONをSQL形式にしたり、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分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なくプログラミングを習得することができます。

■まとめ

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


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

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




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.