どうも、まさとらん（@0310lan）です。
みなさんは、「YouTube」の動画をWebサイトやブログなどに貼り付けたことがあるでしょうか？
「埋め込みタグ」をコピペするだけで、簡単に動画コンテンツを利用できるわけですが、最近は他にも多彩なコンテンツが埋め込めるようになっています。
そこで今回は、特にユニークなWebコンテンツを埋め込める無料サービスだけを厳選してみましたので、ぜひ参考にしてみてください！
■リッチな情報を盛り込んだ「画像」を埋め込む！
【 ThingLink 】
Webページに「画像」を挿入する機会は多いと思いますが、１枚の画像で伝えられるコトには限界があります。
そこで、「ThingLink 」を使うと、ごく普通の画像内に「動画」「音楽」「リンク」「テキスト」…など、さまざまな要素を埋め込むことが可能になるのです。
まずは、以下のサンプル画像をチェックしてみてください！
画像内にマウスを持ってくると、埋め込まれている要素が現れるのでクリックすることで確認できるようになります。（スマホの場合は、そのままタップすればOK…）
作り方も非常に簡単で、ブラウザ上から「専用エディタ」を使って画像内の任意の箇所へ「リンク」を設定するだけでOK！
「WikiPedia」「SoundCloud」「YouTube」など、一部のリンクは自動的に見やすく加工処理もしてくれるので便利です。
あとは、生成された「埋め込みタグ」を自分のWebサイトやブログなどへ貼り付ければ完了です。
これを活用すれば、PRしたい商品画像などの場合、その魅力が分かる「動画」や「解説記事」などを埋め込んで、さらにAmazonなどへの誘導リンクも一緒に貼り付けて…みたいなコトも簡単に実現できてしまいます。
※現在、スマホアプリも用意されています。
■検索性の高い「地図」を埋め込む！
【 Mapme 】
「地図」の埋め込み…と聞くと、「Googleマップ」を思い描く人は多いと思いますが、意外にも類似サービスは多く存在します。
なかでも、「複数のスポット」を地図上にマッピングし、ユーザーに検索してもらうような地図を埋め込むのに最適なのが「Mapme」です。
例えば、以下の地図は「世界のコーヒー専門店」をマッピングした地図になっています。
数多くのスポットが地図上にマッピングされていますが、「キーワード検索」や「カテゴリ検索」を利用できるのが分かると思います。
このような検索機能を実現する場合、普通はエンジニアに頼んでプログラミングしてもらうわけですが、「Mapme」を利用すればスポットを登録するだけで自動的に実現してくれるようになるのです。
スポットは、地図上の任意の箇所を指定して情報を入力するだけで完了します。
もちろん、「Excel」や「KML」ファイルなどから、一気にスポットを登録することも可能です。
また、各スポットには詳細な「情報」や「画像ギャラリー」、「イベント情報」など細かいデータも載せられるので便利です。（地図のテーマやスタイルなども変更可能…）
■ポップアップ式の「FAQ」機能を埋め込む！
【 SlimFAQ 】
ほとんどのWebサービスには、ユーザーのために「FAQ」ページを用意していると思います。
これは、ユーザーが迷った時にいつでも素早く閲覧できると便利なわけですが、「SlimFAQ」を利用すれば、「FAQ」ページをアイコン化して画面下部に常駐してくれるようになります。
アイコンをクリックすれば、「FAQ」ページがポップアップされて、いつでも閲覧できるわけです。
作り方も簡単で、ブラウザ上からブログ感覚で作っていくことが可能です。
最後に、生成された「埋め込むタグ」を、自分のサイトに貼り付ければ完了です。
また、「検索機能」も自動で作ってくれるので便利なのですが、あらかじめ検索されそうなキーワードを「」で囲んでおく必要があるので要注意…。
また、「FAQ」ではなく、SNSのようなチャットサービスを埋め込めるサービスもあるので、ご興味ある方はチェックしてみてください！
■「プロモーション動画」を手軽に作って埋め込む！
【 viosk 】
自分で開発したアプリやWebサービスなどを宣伝する場合に、手っ取り早くカッコいい「動画」を作ってサイトに埋め込めるのが「viosk」です。
すべてブラウザ上で作業ができ、特別な知識も不要で素材なども豊富に用意されています。
以下は、「viosk」だけで作られたサンプル動画です！
このレベルの動画なら、数十分あれば完成してしまうほど「viosk」は簡単な動画制作サービスになっています。
その理由は、多彩なシーンに合わせて作られた数秒程度の「ビデオトラック」が豊富に用意されている点にあり、ドラッグ＆ドロップするだけで動画を制作していくことが可能なのです。
もちろん、各ビデオトラックは「テキスト」や「画像」を差し替えたり、後から音声を追加したりなどの編集も出来るようになっています。
最終的に、動画をダウンロードしたりYouTubeへ投稿することも可能なので、Webサイトへ組み込むのも簡単です。
また、逆にじっくり時間を掛けて動画を作り込みたい人に最適なサービスもあります。
【 Animatron 】
「Animatron」は、本格的なアニメーション動画をブラウザ上で制作できるサービスで、基本機能はすべて無料で利用でき、豊富なサンプル素材も揃っています。
例えば、こんな雰囲気の動画を作ることが可能です！
「Illustrator」などでも利用されているベジェ曲線などを使って、自分でキャラクターを作ってアニメーションさせることも可能で、プロモーション動画だけでなく市販のアニメーション作品を作ることも可能なポテンシャルを秘めています。
■手っ取り早く「グラフ・チャート」を埋め込む！
【 BEAM 】
解析・分析などによって得られた数値データは、やはりグラフやチャートなどで可視化することが多いと思います。
そこで、見栄えの良いグラフをサクッと作ってサイトに埋め込めるのが「BEAM」です。
ブラウザ上に簡易的な「Excel風シート」が表示されるので、そこへ直接データを入力するだけで自動的に「棒グラフ」「円グラフ」「折れ線グラフ」などに変換してくれます。
実際に作ってみたサンプルがコチラ！
非常に手っ取り早くデータを可視化できるので、すぐにでも自分のサイトへ組み込むことが出来るでしょう。
ちなみに、もっと大量のデータを可視化したい場合に最適なサービスもあります。
【 RAW 】
データを読み込むだけで、「インフォグラフィック」などにもよく採用されている特殊なグラフやチャートに変換してくれます。
「D3.js」をベースにしているので視覚的にも美しく、サイトの「質」を高めることにも繋がるでしょう。
■学習系コンテンツを埋め込む！
【 BitRun 】
「CodePen」や「JSFiddle」のように、HTML/CSS/JSのコードや実行結果を埋め込めるサービスはとても重宝します。
「BitRun」も同様なサービスですが、こちらは「Ruby」「Node.js」「Python」「PHP」…など、10種以上のプログラミング言語に対応しているのが特徴です。
例えば、以下は「Ruby」で「Fizz Buzz」のプログラムを埋め込んだ例です。
右上にある「Run」ボタンをクリックすると、実行結果がしっかりと表示されるのが分かると思います。
「BitRun」は海外サービスですが、より高機能な国産サービスの実行環境を埋め込むこともできます！
【 paiza.io 】
主要な20種以上のプログラミング言語に対応し、複数のファイルを作成＆実行したり、外部APIと連携したプログラムや、コードの定期実行、コラボレーション機能…など、豊富なサービスを活用できるのが特徴です。
以下に、Pythonコードの参考例を表示しています。
ちなみに、ボタン１つで「埋め込みタグ」を発行でき、エディタの「テーマカラー」も変えられるようになっています。
「エンジニアブログ」や勉強会、又は学習コンテンツをメインにしたサービスなどに組み込めば、非常に効率の良いサイトに生まれ変わるでしょう。
さらに、ターミナル上での作業を丸ごと「テキスト動画」にして埋め込めるサービスもあります。
【 asciinema 】
ターミナルから本体をインストールしたあとに、録画コマンドを実行します。
$ asciinema rec
これだけで、バックグラウンドでコマンドや実行結果を録画してくれるようになり、以下のような動画に変換して埋め込むことが出来るようになります。
面白いのは、「テキスト動画」になっているので、画面上の「文字」はマウスで選択したりコピーすることも出来ます！
下手なマニュアルを作成するよりも、この動画を１つサイトに埋め込む方がとても分かりやすい説明になるかもしれませんね。
特に、「git」の解説やサーバーサイドの「ノウハウ」を伝えるには最適な手段と言えるでしょう。
■paizaラーニングについて
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、RubyやPythonはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！
■まとめ
今回ご紹介したようなサービスを上手く連携させて、独自のWebサイトを作っていけばとてもユニークなページが簡単に作れると思います。
プロトタイプ作りに使ったり、いつものブログにアクセントを加える意味で使ったりなど、いろいろ応用範囲は広いのではないでしょうか。
もし、ご興味のあるコンテンツがあるようでしたら、ぜひ一度トライしてみることをオススメ致します！
