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

アプギガトップ > 「埋め込みコード」でココまで可能!欲しかったあの機能を搭載できる無料サービス8選!
注目記事ピックアップ
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/03/07 22:30

「埋め込みコード」でココまで可能!欲しかったあの機能を搭載できる無料サービス8選!



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

みなさんは「埋め込みコード(embed)」をご存知でしょうか?

例えば、YouTubeの動画を自分のサイトやブログなどに表示させたい場合に、よく使われるのが以下のようなコードです。


今回は、このような「埋め込みコード」をサイト内に貼り付けて、簡単に「面白い機能」を追加できる無料のWebサービスをご紹介しようと思います!

 

HTML5のアニメーション動画を作るなら…コレ!

HTML5 maker


ブラウザ上のオンラインエディタで、マウスをドラッグ&ドロップするだけで、素早くアニメーションを作ることが出来るサービスです。

サイトのトップに、プロモーション用の動画を作ってみたり、バナー広告や宣伝用の素材作りなどにも活かすことができます。

 

また、必要となる写真素材やボタン画像、エフェクト効果やアニメーションテンプレートなど、様々なモノがあらかじめ搭載されているのはうれしいところ。


 

最終的に、書き出された「埋め込みコード」をサイトに貼り付けると以下のようになります。




 

文字にサウンドを埋め込む!

SoundCite


SoundCloudの音源から、好きなモノを選択して「テキストの文字」に、その音源を埋め込むことができるサービスです。

音源の「開始点」と「終了点」が選択可能なので、自分の好きな部分だけを埋め込むことも簡単にできます。

例えば、以下のようなカタチで文字に表示されている再生ボタンをクリックすることで利用できます。(スマホだと、一部再生されない場合アリ)

<参考例>

・私は、オバマ大統領の演説を聞くのがとても好きです。ぜひ、みなさんも聞いてみてください!

・作業用のBGMはやっぱりジャズに限る!

このように、表示させたいテキストの位置に「埋め込みコード」を貼るだけなので非常に簡単です。ちょっと面白いサイトを作るなら最適のサービスかと思います。

 

単純な画像に飽きてしまった人は…コレ!

ThingLink


写真やイラストの中に、文字や音楽・動画などを埋め込むことができるサービスで、作ったものをさらに自分のサイト内に埋め込むことも可能。

 

例えば、以下のような集合写真であれば、マウスを顔の付近に近づけるとそれぞれの名前を表示させることができます。


 

車を宣伝する写真も、以下の様な詳細情報を埋め込むと分かりやすいですね。


 

地図やマップなどにも、さらに詳しい情報を掲載すると便利です。


このような画像を利用すれば、いつも掲載している自分の画像もきっと見違えるはず!
参考記事

 

自作のGoogleマップを埋め込むなら…コレ!

Maps Engine Lite


おなじみのGoogleマップをカスタマイズできる、Google提供によるサービスです。

異なるテンプレートのマップから、好きな場所にピンを立ててまとめることが出来るので、自分独自のオリジナルマップを作りやすいサービスと言えるでしょう。

 

例えば、旅行記のサイトやブログなどに、以下の様な訪問国をまとめたマップを埋め込めば、非常に分かりやすくなるでしょう。



共有設定で、公開にしないと「埋め込みコード」が生成されないので要注意です。

 

リッチな問い合わせフォームを作りたいなら…これ!

Typeform


よくありがちな「問い合わせフォーム」を、洗練されたデザインのフォームに仕上げてくれるサービスです。

元々は、アンケートを不特定多数の人に実施してもらうためのサービスなのですが、作り方によってはリッチなフォーム作成も可能になっています。
(サンプルフォームはこちらから試せます!)


 

美麗なインフォグラフィックスを挿入したい人は…コレ!

infogr.am


複雑な情報は、何をどうやっても上手く伝えられないもの…。

それを少しでも読者に分かりやすく伝えるための手段として「インフォグラフィックス」がありますが、これをブラウザ上で簡単に作成できるサービスとなっています。


 

自作の3Dモデルをサイトに埋め込みたい場合は…コレ!

Sketchfab


3Dモデルを直接マウスで触れるように、サイト内へ掲載したい場合に最適なサービスとなります。

3Dモデルのファイルをアップロードして、掲示された埋め込みコードを貼り付けるだけで、以下のような触ることができる3Dモデルを表示することができます。


Fullham139 from DcDeath on Sketchfab.


自分の作品をポートフォリオ風に表示するなど、使い方はいろいろ考えられそうですね。

 

最近流行りの「パララックス効果」を使いたい人は…コレ!

Parallax Background Builder


マウスをスクロールすることで、背景や画像などがアニメーションする仕組みを簡単に作れるサービスです。

 

エディタには、あらかじめ使いやすい素材も多く搭載されており、クラウド上に保存している自分の画像やイラストも追加できるようになっています。



基本的にはレイヤーを作り、マウス操作を指定してどのようにアニメーションさせるかを選択していくだけなので、直感的に作成していくことができます。

 

おまけ(他にもあるこんなサービス!)

今回、取り上げられなかったいくつかのサービスも、ついでに掲載しておきます。

埋め込みコードではなく、スクリプトを必要とするモノもあるのでご注意を…。

Olark

・リアルタイムチャット機能を簡単に搭載できるサービスで、ECショップなどのサイトで顧客と直接会話したりするのに役立ちます。

AddThis

・あらゆるSNSサービスを網羅しており、自分好みにカスタマイズした「シェア機能」をサイトに埋め込めるサービスです。関連記事などの表示も可能。

WebPay

・ruby、java、phpなどのプログラミング言語を選択して、簡単なコードを追加するだけでオンライン決済ができる機能を追加することができます。

intro.js

・サービスの使い方など、チュートリアル機能をサイトに搭載できるサービスで、初めて訪問したユーザーが直感的にサービスを使えるようになる機能を提供できます。

CSS3 Animation Cheat Sheet

・CSS3を使ったアニメーション表示を、簡単に実装できる機能です。なめらかな動きや、ちょっとしたアクションを追加したい場合には強力なツールです。

 

まとめ

基本的なサイトさえ作ってしまえば、今回ご紹介したようなサービスと併用することで、かなり本格的なWebサイトやサービスを構築できるようになります。

また、それぞれのサービスを同時に使って融合することで、何か新しいサービスが生まれるような予感すら覚えます…。

みなさんも、ぜひ!どれか1つ試しに使ってみて、その素晴らしさを体験してみてください。

 

written by まさとらん

 

 

 


 

まさとらん

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

twitter:0310lan

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

ページトップへ戻る