開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
ANGIE / 2016年9月30日 10時30分
どうも、まさとらん(@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)
外部リンク
この記事に関連するニュース
-
【徹底検証】本当に使えるChrome拡張機能はどれ? 第4回 Web上の文章や画像をメモとして保存できる「Google Keep」
マイナビニュース / 2024年10月17日 9時0分
-
iPadOS 18の新機能! iPadのホーム画面をとことんカスタマイズしよう - iPadパソコン化講座
マイナビニュース / 2024年10月8日 11時52分
-
無料で使えるフォーム作成ツール「ヘルプドッグ フォーム」、WordPress用プラグイン「Helpdog Form」を提供開始
PR TIMES / 2024年10月6日 7時40分
-
「どこどこJP」に新機能追加!WordPress プラグイン「DocoDoco GeoTargeting」に A/Bテスト機能 を実装
PR TIMES / 2024年9月30日 11時45分
-
「iOS 18」でホーム画面カスタマイズがより簡単に!ウィジェットの追加やサイズ変更方法が新しくなったよ
isuta / 2024年9月26日 19時0分
ランキング
-
1「カスハラしたことがある人」に聞いた、カスハラした理由は?
マイナビニュース / 2024年10月22日 16時55分
-
2最近、本はほとんど「kindle」で買っています。もしAmazonが倒産したら、kindle本は読めなくなりますか? 安くて場所も取りませんが、「紙の本」よりリスクがあるのでしょうか…?
ファイナンシャルフィールド / 2024年10月20日 4時40分
-
3【自転車】買い物袋、雨の日の「折りたたみ傘」 ハンドルにぶら下げ危険 なぜ?
オトナンサー / 2024年10月22日 17時10分
-
4「三菱デリカで人生が変わった」33歳主婦。なぜ「デリカが特別」なのか、本人を直撃
日刊SPA! / 2024年10月21日 15時53分
-
5食費の節約にも!3COINS「おにぎり+おかず入れ」が“手間抜き”弁当にピッタリすぎた
女子SPA! / 2024年10月22日 8時46分
記事ミッション中・・・
記事にリアクションする
記事ミッション中・・・
記事にリアクションする
エラーが発生しました
ページを再読み込みして
ください