開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた！

どうも、まさとらん（@0310lan）です！

今回は、自分のWebサイトやブログなどに、誰でも気軽にオシャレなWebコンテンツを組み込むことができる無料のWebサービスをご紹介しようと思います。

例えば、「画像ギャラリー」「音楽プレイヤー」「ニュースフィード」「ツールTip」などを、それぞれ1つの「ウィジェット」にすることで、埋め込みコードさえ貼り付ければ自分のWebページへすぐに表示可能になります！

【 Widgetic 】



チュートリアルを試してみよう！
それでは、実際に「Widgetic」を使いながら、どのようなサービスなのかを見ていきましょう！


まずは、サイトにアクセスして無料のユーザー登録を行います。



すると、音楽を再生できる簡単な「Webプレイヤー」を作るチュートリアルが始まるので、「Show me」ボタンをクリック！



表示されているアーティストをいくつか選択して、画面下の「Next」ボタンをクリックします。



そして、好きな「➀ テンプレート」を選択し、「➁ Next」ボタンをクリック！



これで、レスポンシブ対応の「Webプレイヤー」ウィジェットが完成しました。

画面下のボタンをクリックして、自分の管理画面を見てみましょう。


今作ったウィジェットが表示されているので、クリックします。



画面右上の「埋め込み」ボタンをクリック！



ここで「埋め込みコード」が生成されるので、あとはこれをHTMLの好きな場所に貼り付ければすぐに利用可能です！



実際に貼り付けると、こんな感じになります！
Audio Playlist

※アーティストをクリックすると、音楽が再生されます。


もっとカスタマイズしよう！
先ほど作成したウィジェットは、自分の好きなようにカスタマイズを行うことが可能です。


やり方は簡単で、「埋め込み」ボタンの横にある編集ボタンをクリックします。



すると、「カスタマイズエディタ」が表示されて、さまざまな「スタイル」を変更できるテンプレートを選べるようになります。



テンプレートを変えるだけで、見た目を大きく変化させられるのが特徴となっています。



もちろん、独自のテンプレートを作成することも可能で、カラーの配色やテキストの表示条件、ビジュアライザーの有無…など、かなり細かく編集できるので便利です。

（※「EDIT SKIN」ボタンから編集できます…）


また、「Dropbox」「Googleドライブ」「SoundCloud」のようなクラウドサービス経由で音楽ファイルを取り込むことも可能です。



そして、スタイルを少し変更したのがコチラ！
Audio Playlist
プレイリストの中身は先程と同じですが、見た目が変更されたことで違う印象を受けたのではないでしょうか。


多彩なウィジェット生成機能！
これまで、Webサイトに好きな音楽を再生できる「Webプレイヤー」を例にしましたが、「Widgetic」では他にも多彩なウィジェットを作ることが可能です！


例えば、イベントサイトや新規Webサービスなどでも活用できる「カウントダウンタイマー」がコチラ！（東京オリンピック開催までの例…）

【カウントダウンタイマー】
Countdown Timer



さらに、マウスのドラッグなどで「ビフォー・アフター」が直感的に分かりやすい「比較写真」なども簡単！
Before and After
※真ん中の「バー」を左右に動かしてみてください。



また、普通の写真にインタラクティブ要素を取り入れたボタンを配置できるウィジェットもあります。
Description Dots
※番号をクリック(タッチ)すると名称が表示されます。



実用的なコンテンツとしては、「FAQ」などを手軽に作ることも可能です！（項目を選択すると「回答」が表示されます…）
FAQ Accordion
他にも、Instagramを活用した画像ギャラリーや、RSSフィードを横方向に流し続けるコンテンツ、SNSボタンの生成、マップ、スライド…など、多彩なウィジェットが作れるようになっています。


以下のページから、どのようなモノが作れるのかチェックすることが出来るので参考にしてみてください！

【 ウィジェット紹介ページ 】



また、「Widgetic」のユニークな点として、専用のAPIが提供されているのも要チェックです！
これにより、自分のWebサービスなどに「Widgetic」の機能を組み込んで、より高度な使い方も実現できるようになります。


さらに、WordPressプラグインもリリースされているので、ブログを書いている人はぜひチェックしてみてください！

・wordpressプラグイン
https://srd.wordpress.org/plugins/widgetic/


おまけ
最後に、今回ご紹介した「widgetic」のような感覚で、簡単にさまざまな機能を自分のWebページに組み込めるサービスを合わせてご紹介しておきます！

【 わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた！ 】

HTMLにわずか1行のコードを追加することで、SNS用のシェアボタン、チャット機能、アナリティクス、ユーザー行動解析、コードエラーの可視化…など、多彩なサービスと簡単に連携して管理できるようになります。

Web制作を強力にサポートしてくれるので、ご興味ある方はぜひ参考にしてみてください。


まとめ
「Widgetic」は、まだまだ開発途上のサービスなので、これからどんどん新しいウィジェットが追加されたり、機能面でのバージョンアップが行われる予定です。

基本的な機能はすべて無料で提供されているうえ、コードを貼り付けるだけですぐに導入できるのも特徴的と言えるでしょう。
そのため、WordPressはもちろんのこと、国内外の無料ブログサービスやWebサイト制作サービスなどとも連携しやすいので便利です。

手軽にユニークなWebコンテンツを作れるので、ぜひみなさんも活用してみてください！


＜参考＞
・「Widgetic」公式サイト



written by まさとらん（@0310lan）