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

アプギガトップ > 「埋め込みコード」でココまで可能!欲しかったあの機能を搭載できる無料サービス8選!
注目記事ピックアップ
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
share0
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
share0
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
プログラミング
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...

ページトップへ戻る