Other Contents

著作権フリー立ちキャラクター素材集



ブログパーツの作り方
(ブログパーツ・記事埋め込みアプリの作り方)


　既存のWebアプリを使ったブログパーツ、またはブログなどに埋め込んで使う方法を説明します。ただし、ここでの「Webアプリ」とはあくまでも単体でのブラウザ起動が可能であるものを指します（FlashやJavaアプレットなど）。専用サーバーが必要なアプリではないことに注意して下さい。

　具体的な設置例としてはこんな感じになります。また、ブログパーツ・記事埋め込みのどちらも同じコードを使います。

　各プロバイダによって使用可否も異なります。現在わかっている、自作ブログパーツ設置・記事埋め込みができるプロバイダはこちらの一覧表で確認して下さい。


【ブログパーツとは？】
　ブログパーツ・記事埋め込みアプリといっても特別なものではありません。簡単に言えば、自分のサーバーに置いてあるアプリを、他の人のブログの中に表示させれば良いだけです。例えれば、直リンクのバナーのようなものでしょうか？そのバナーがアプリになっただけです。そう考えれば色々とやり方はありますが、とりあえず一番簡単な方法で説明してみたいと思います。


【使用するHTMLタグ】
　やり方としては大きくわけて２通りの方法があります。実際にはアプリ自体の仕様によって使用可否も異なるのですが、考え方としてはこのどちらかが使えれば、だいたいのケースに当てはまると思います。

　①<iframe> タグを使ったインラインフレームの使用
　②<script> タグを使ったアクティブスクリプト（JavaScript）の使用

　どちらを使うかは制作者に任せますが、アプリ自体の使用可否以外には次の長所・短所が考えられます。

タグ長所短所
<iframe> ・HTMLタグがほぼそのままで使えるので簡単。
・アドレス指定に相対パスが使える。
 ・HTMLタグに汎用性がないため、アプリの数だけページが必要となる。
・サーバーがダウンなどしてる時、エラーページが表示されてしまう。
<script> ・HTMLタグの一部をスクリプトで置き換えたりできるため、１つのスクリプトで複数のページが利用できる。
・サーバーがダウンなどしていても、エラーページは表示されない。
 ・HTMLタグをスクリプト内に表記しなければならないため、非常に困難。
・アドレス指定に絶対パスしか使えない。
・ブラウザの設定でアクティブスクリプトをOFFにしていると表示されない。
・文字コードが合ってないと文字化けする。
・別途データやファイルを読み込む際、クロスドメインの設定が必要な場合がある。[⇒参考][⇒参考]


【配信用のサーバについて】
　Flashアプリなどはプロバイダによっては元から記事埋め込みできるものもありますが、誰もが使える汎用的なものとして配信するには、配信用のサーバーが必要になります。ＨＰをお持ちの方ならそのまま使っても構いません。お持ちでないなら、これも特別なものが必要なわけではないので、無料レンタルサーバで十分です。オススメとしてはＦＣ２ホームページなどが良いでしょう。無料で使えるのに広告も付かす、容量も大きいので大量に作っても問題ありません。一緒にＨＰやギャラリーなども作っても余るくらいです(笑)。筆者も実験用に使ってます。^^)ゞ


【アプリのサイズについて】
　またどのブログのレイアウトにも収まるようにするには、配信するアプリの横幅にも注意する必要があります。小さい分には構いませんが、あまり大きいものを作ると、ブログのデザインによってははみ出してしまう恐れがあるからです。色々なブログを調査・実験しましたが、以下の横幅なら問題ないと思われます。

用途横幅
ブログパーツ 160 px
記事埋め込み 400 px


【配信時の注意点】
　テストするときに同じサーバー上でやった場合は上手くいっても、別のサーバーからは呼び出せない場合があります。これはプロバイダのセキュリティ設定によるものです。公開前に別サーバー・別プロバイダから呼び出せるかテストしてみて下さい。また管理者アカウントでログインしている場合使える機能も、ゲストアカウントではアクセスできない場合もあります。一旦ログアウトして上手く表示できるかを確かめてみることも必要です。


【作成するコード】
　先の<iframe>タグと<script>タグの長所・短所に「相対パス」「絶対パス」のことが含まれていましたが、これはアプリ配信サーバと視聴者のブログのサーバの関係によるものです。ここからはそれぞれのタグについての考え方と使い方について説明します。利用する方法を選んでお読み下さい。



■<iframe>タグを使う場合

　「インラインフレーム」(iframe)とはあるHTMLページに他のHTMLページを埋め込むという意味です。つまりこれらのページは別々に動作していることになります。従って相対アドレスが使えることになります。イメージとしては視聴者が見ているブログの一部をくり貫いて、そこから別のページを覗いている感じです。つまりはそのくり貫いた穴から見えるページを作ればいいわけです。これは普通のHTMLページで構いません。ただし、１つだけ注意点があります。このページがブログ内に隙間無くピッタリとハマるようにするには、以下の部分が HTML に必要です。


　(隙間を無くすタグ)
<style type="text/css">
<!--
body { margin:0px; }
-->
</style>

　できれば <head>～</head> 内がいいですね。これはページ全体の余白を無くすタグです。また、HTMLの内容をセンタリング（<center>、<div align=center>など）している場合は、このタグを消した方が無難です。するとブラウザでは左上隅にピッタリくっついたような感じで表示されたハズです。内容は何でもいいので、これを配信用ページとします。

　そして、作ったページを配信用サーバにアップロードします。アップロードしたら、ブラウザできちんと表示できるかを確認して下さい。表示できたなら、次にこのページをインラインフレーム内で表示するタグを記述します。


　(ブログパーツ・記事埋め込み用コード)

<iframe src="http://（アップロードしたファイルのURL）" width="160" height="230" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>


　「width="160" height="230"」となっていますが、これは表示するアプリ（またはページ）のサイズに合わせて変更して下さい。この場合、横×縦が 160x230px のアプリを表示していることになります。平たく言えば、ブログのくり貫いた穴のサイズになるわけですね。そしてこのタグをブログパーツ、または記事に埋め込みコードとして使用します。やり方はプロバイダによって違うので、こちらをご覧下さい。


　また、これらブログパーツや記事埋め込みアプリを使用する際、センタリングしたい場合は、「ブログパーツ・記事埋め込み用コード」を <div style="text-align:center;">～</div> で囲むようにします。


　(ブログパーツ・記事埋め込み用コードをセンタリングした例)

<div style="text-align:center;"><iframe src="http://（アップロードしたファイルのURL）" width="160" height="230" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe></div>


　そして、このコードをＨＰやブログなどで公開したい場合は、テキストボックスを使うと便利です。例えば以下のようになります。


　(テキストボックスでのタグ公開例)

<textarea cols="50" rows="2" onFocus="this.select()"><iframe src="http://（アップロードしたファイルのURL）" width="160" height="230" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe></textarea>

　「cols="50" rows="2"」となってる部分はテキストボックスの横×縦の文字数です。ブラウザによって見た目はかなり変わるので注意して下さい。幅を揃えたい場合は textarea の属性に「style="width:400px;"」（数値は任意）のように強制的に幅を固定する方法があります。「onFocus="this.select()"」は自動で内容をハイライトするスクリプトですが、ブログによっては対応してないものもあります。またこのテキストボックスのタグ <textarea> が対応してないブログもありますので、ご注意下さい。

　実際に表示してみると↓こんな感じになります。


　はじめから公開用コードに<div style="text-align:center;">～</div>を入れておいてもいいですね。その場合は常にセンタリングされることになります。

　配信用のHTMLページは何でもいいので、ご自分で作ったHTMLファイルのURLに置き換えて下さい。

　以上で作成方法を終了します。

　作ったタグを使うにはこちら


■<script>タグを使う場合

　「アクティブスクリプト」とはHTML上で動作するスクリプト言語（JavaScriptやVBScriptなど）のことを指します。この場合はブログやＨＰに直接HTMLコードを記入することと同じになります。そのコードの中に配信サーバのアプリを呼び出すタグを記入すれば、視聴者のブログ内でアプリが動作してるように見えるわけです。従ってアドレスはブログのままなので、絶対アドレスしか使えません。アプリによってはセキュルティ上、他のサーバからはデータを読み込めないように設計されているので、この方法の場合はアプリ自体の使用可否を始めに確認して下さい。

　スクリプトタグに関しては、短いコードならば直接配信コードに書いても構いませんが、後から修正する場合などのためにスクリプトだけ別ファイルにすることをオススメします。ここでは JavaScript を用いる例として、「～.js」ファイルを作ることとします（空の .txt ファイルを .js にするたけで良い）。

　スクリプトの内容は各自の書き方で構いませんが、一番簡単な例として「document.write()」を使ってみたいと思います。先ほど作った ～.js ファイルに次のような感じで記述します。


　(スクリプトファイル(～.js) の内容例)

document.write('<b>This is Sample.</b>');
※日本語を使う場合は文字コードに注意して下さい。

　このスクリプトの「<b>This is Sample.</b>」の部分をアプリ用のタグ（Flashなら<object>～</object>、JAVAなら<applet>～</applet>など）に置き換えればいいわけです。もちろん複数の「document.write()」で書いても構いません。URL部分は絶対アドレスになることに注意して下さい。

　そして完成した「～.js」ファイルを配信用サーバにアップロードしたら、このファイルを呼び出すタグを「ブログパーツ・記事埋め込み用コード」として作成すれば良いということになります。


　(ブログパーツ・記事埋め込み用コード)

<script type="text/javascript" src="http://（スクリプトが記述されたファイルのURL）"></script>


　また、このコードをＨＰやブログなどで公開したい場合は、テキストボックスを使うと便利です。例えば以下のようになります。


　(テキストボックスでのタグ公開例)

<textarea cols="50" rows="2" onFocus="this.select()"><script type="text/javascript" src="http://（スクリプトが記述されたファイルのURL）"></script></textarea>

　「cols="50" rows="2"」となってる部分はテキストボックスの横×縦の文字数です。ブラウザによって見た目はかなり変わるので注意して下さい。幅を揃えたい場合は textarea の属性に「style="width:400px;"」（数値は任意）のように強制的に幅を固定する方法があります。「onFocus="this.select()"」は自動で内容をハイライトするスクリプトですが、ブログによっては対応してないものもあります。またこのテキストボックスのタグ <textarea> が対応してないブログもありますので、ご注意下さい。

　実際に表示してみると↓こんな感じになります。


　配信用のスクリプトは何でもいいので、ご自分で作った js ファイルのURLに置き換えて下さい。

　以上で作成方法を終了します。

　作ったタグを使うにはこちら







ページの先頭へ



inserted by FC2 system