読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

「埋め込みタグ」一発でWebコンテンツを激変させる至高のサービス総まとめ!

f:id:paiza:20160425142020j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、YouTube」の動画をWebサイトやブログなどに貼り付けたことがあるでしょうか?

「埋め込みタグ」をコピペするだけで、簡単に動画コンテンツを利用できるわけですが、最近は他にも多彩なコンテンツが埋め込めるようになっています。

そこで今回は、特にユニークなWebコンテンツを埋め込める無料サービスだけを厳選してみましたので、ぜひ参考にしてみてください!

■リッチな情報を盛り込んだ「画像」を埋め込む!

ThingLink

f:id:paiza:20160425142138j:plain
Webページに「画像」を挿入する機会は多いと思いますが、1枚の画像で伝えられるコトには限界があります。

そこで、「ThingLink 」を使うと、ごく普通の画像内に「動画」「音楽」「リンク」「テキスト」…など、さまざまな要素を埋め込むことが可能になるのです。

まずは、以下のサンプル画像をチェックしてみてください!

画像内にマウスを持ってくると、埋め込まれている要素が現れるのでクリックすることで確認できるようになります。(スマホの場合は、そのままタップすればOK…)

作り方も非常に簡単で、ブラウザ上から「専用エディタ」を使って画像内の任意の箇所へ「リンク」を設定するだけでOK!
f:id:paiza:20160425142206j:plain
WikiPedia」「SoundCloud」「YouTube」など、一部のリンクは自動的に見やすく加工処理もしてくれるので便利です。

あとは、生成された「埋め込みタグ」を自分のWebサイトやブログなどへ貼り付ければ完了です。

これを活用すれば、PRしたい商品画像などの場合、その魅力が分かる「動画」や「解説記事」などを埋め込んで、さらにAmazonなどへの誘導リンクも一緒に貼り付けて…みたいなコトも簡単に実現できてしまいます。

※現在、スマホアプリも用意されています。

■検索性の高い「地図」を埋め込む!

Mapme

f:id:paiza:20160425142352j:plain
「地図」の埋め込み…と聞くと、「Googleマップ」を思い描く人は多いと思いますが、意外にも類似サービスは多く存在します。

なかでも、複数のスポット」を地図上にマッピングし、ユーザーに検索してもらうような地図を埋め込むのに最適なのが「Mapme」です。

例えば、以下の地図は「世界のコーヒー専門店」をマッピングした地図になっています。

数多くのスポットが地図上にマッピングされていますが、「キーワード検索」や「カテゴリ検索」を利用できるのが分かると思います。
f:id:paiza:20160425142411j:plain
このような検索機能を実現する場合、普通はエンジニアに頼んでプログラミングしてもらうわけですが、「Mapme」を利用すればスポットを登録するだけで自動的に実現してくれるようになるのです。

スポットは、地図上の任意の箇所を指定して情報を入力するだけで完了します。
f:id:paiza:20160425142425j:plain
もちろん、「Excel」や「KML」ファイルなどから、一気にスポットを登録することも可能です。

また、各スポットには詳細な「情報」や「画像ギャラリー」、「イベント情報」など細かいデータも載せられるので便利です。(地図のテーマやスタイルなども変更可能…)

他にも、「Mapme」の活用事例をコチラから閲覧することができます!

■ポップアップ式の「FAQ」機能を埋め込む!

SlimFAQ

f:id:paiza:20160425143810j:plain
ほとんどのWebサービスには、ユーザーのために「FAQ」ページを用意していると思います。

これは、ユーザーが迷った時にいつでも素早く閲覧できると便利なわけですが、「SlimFAQ」を利用すれば、「FAQ」ページをアイコン化して画面下部に常駐してくれるようになります。
f:id:paiza:20160425143927j:plain

アイコンをクリックすれば、「FAQ」ページがポップアップされて、いつでも閲覧できるわけです。

作り方も簡単で、ブラウザ上からブログ感覚で作っていくことが可能です。
f:id:paiza:20160425143951j:plain

最後に、生成された「埋め込むタグ」を、自分のサイトに貼り付ければ完了です。

また、「検索機能」も自動で作ってくれるので便利なのですが、あらかじめ検索されそうなキーワードを「」で囲んでおく必要があるので要注意…。

また、「FAQ」ではなく、SNSのようなチャットサービスを埋め込めるサービスもあるので、ご興味ある方はチェックしてみてください!

■「プロモーション動画」を手軽に作って埋め込む!

viosk

f:id:paiza:20160425144259j:plain
自分で開発したアプリやWebサービスなどを宣伝する場合に、手っ取り早くカッコいい「動画」を作ってサイトに埋め込めるのが「viosk」です。

すべてブラウザ上で作業ができ、特別な知識も不要で素材なども豊富に用意されています。

以下は、「viosk」だけで作られたサンプル動画です!

このレベルの動画なら、数十分あれば完成してしまうほど「viosk」は簡単な動画制作サービスになっています。

その理由は、多彩なシーンに合わせて作られた数秒程度の「ビデオトラック」が豊富に用意されている点にあり、ドラッグ&ドロップするだけで動画を制作していくことが可能なのです。
f:id:paiza:20160425144318j:plain

もちろん、各ビデオトラックは「テキスト」や「画像」を差し替えたり、後から音声を追加したりなどの編集も出来るようになっています。
f:id:paiza:20160425144329j:plain

最終的に、動画をダウンロードしたりYouTubeへ投稿することも可能なので、Webサイトへ組み込むのも簡単です。

また、逆にじっくり時間を掛けて動画を作り込みたい人に最適なサービスもあります。

Animatron

f:id:paiza:20160425144354j:plain
Animatron」は、本格的なアニメーション動画をブラウザ上で制作できるサービスで、基本機能はすべて無料で利用でき、豊富なサンプル素材も揃っています。

例えば、こんな雰囲気の動画を作ることが可能です!

Illustrator」などでも利用されているベジェ曲線などを使って、自分でキャラクターを作ってアニメーションさせることも可能で、プロモーション動画だけでなく市販のアニメーション作品を作ることも可能なポテンシャルを秘めています。

■手っ取り早く「グラフ・チャート」を埋め込む!

BEAM

f:id:paiza:20160425144512j:plain
解析・分析などによって得られた数値データは、やはりグラフやチャートなどで可視化することが多いと思います。

そこで、見栄えの良いグラフをサクッと作ってサイトに埋め込めるのが「BEAM」です。

ブラウザ上に簡易的な「Excel風シート」が表示されるので、そこへ直接データを入力するだけで自動的に「棒グラフ」「円グラフ」「折れ線グラフ」などに変換してくれます。
f:id:paiza:20160425144525j:plain

実際に作ってみたサンプルがコチラ!

非常に手っ取り早くデータを可視化できるので、すぐにでも自分のサイトへ組み込むことが出来るでしょう。

ちなみに、もっと大量のデータを可視化したい場合に最適なサービスもあります。

RAW

f:id:paiza:20160425144607j:plain
データを読み込むだけで、「インフォグラフィック」などにもよく採用されている特殊なグラフやチャートに変換してくれます。

「D3.js」をベースにしているので視覚的にも美しく、サイトの「質」を高めることにも繋がるでしょう。

■学習系コンテンツを埋め込む!

BitRun

f:id:paiza:20160425144642j:plain
CodePen」や「JSFiddle」のように、HTML/CSS/JSのコードや実行結果を埋め込めるサービスはとても重宝します。

BitRun」も同様なサービスですが、こちらは「Ruby」「Node.js」「Python」「PHP」…など、10種以上のプログラミング言語に対応しているのが特徴です。

例えば、以下は「Ruby」で「Fizz Buzz」のプログラムを埋め込んだ例です。

右上にある「Run」ボタンをクリックすると、実行結果がしっかりと表示されるのが分かると思います。

BitRun」は海外サービスですが、より高機能な国産サービスの実行環境を埋め込むこともできます!

paiza.io

f:id:paiza:20160425184811j:plain
主要な20種以上のプログラミング言語に対応し、複数のファイルを作成&実行したり、外部APIと連携したプログラムや、コードの定期実行、コラボレーション機能…など、豊富なサービスを活用できるのが特徴です。

以下に、Pythonコードの参考例を表示しています。

ちなみに、ボタン1つで「埋め込みタグ」を発行でき、エディタの「テーマカラー」も変えられるようになっています。

「エンジニアブログ」や勉強会、又は学習コンテンツをメインにしたサービスなどに組み込めば、非常に効率の良いサイトに生まれ変わるでしょう。

さらに、ターミナル上での作業を丸ごと「テキスト動画」にして埋め込めるサービスもあります。

asciinema

f:id:paiza:20160425144711j:plain
ターミナルから本体をインストールしたあとに、録画コマンドを実行します。

$ asciinema rec

これだけで、バックグラウンドでコマンドや実行結果を録画してくれるようになり、以下のような動画に変換して埋め込むことが出来るようになります。

面白いのは、「テキスト動画」になっているので、画面上の「文字」はマウスで選択したりコピーすることも出来ます!

下手なマニュアルを作成するよりも、この動画を1つサイトに埋め込む方がとても分かりやすい説明になるかもしれませんね。

特に、「git」の解説やサーバーサイドの「ノウハウ」を伝えるには最適な手段と言えるでしょう。

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろん今回の記事の「学習系コンテンツを埋め込む!」のところで使用しているRubyPythonにも対応しておりますので「RubyPythonでプログラミング問題を解いてみたい」「他の言語を試してみたい」「自分のスキルをはかってみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、RubyPythonはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回ご紹介したようなサービスを上手く連携させて、独自のWebサイトを作っていけばとてもユニークなページが簡単に作れると思います。

プロトタイプ作りに使ったり、いつものブログにアクセントを加える意味で使ったりなど、いろいろ応用範囲は広いのではないでしょうか。

もし、ご興味のあるコンテンツがあるようでしたら、ぜひ一度トライしてみることをオススメ致します!




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編