シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
注目記事ピックアップ
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/09/30 19:30

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

widgetic-01 どうも、まさとらん(@0310lan)です!

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

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

【 Widgetic 】
widgetic-02

チュートリアルを試してみよう!

それでは、実際に「Widgetic」を使いながら、どのようなサービスなのかを見ていきましょう!


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

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

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

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

これで、レスポンシブ対応の「Webプレイヤー」ウィジェットが完成しました。
widgetic-07 画面下のボタンをクリックして、自分の管理画面を見てみましょう。


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

画面右上の「埋め込み」ボタンをクリック!
widgetic-09

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

実際に貼り付けると、こんな感じになります!
Audio Playlist
※アーティストをクリックすると、音楽が再生されます。


もっとカスタマイズしよう!

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


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

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

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

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


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

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


多彩なウィジェット生成機能!

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


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

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


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



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



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


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

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

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


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

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


おまけ

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

【 わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた! 】
widgetic-17 HTMLにわずか1行のコードを追加することで、SNS用のシェアボタン、チャット機能、アナリティクス、ユーザー行動解析、コードエラーの可視化…など、多彩なサービスと簡単に連携して管理できるようになります。

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


まとめ

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

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

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


<参考>
「Widgetic」公式サイト



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る