スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログのスライドのどんぐり自作の自動スクリプト作成ツールの使い方

 だいぶ以前にFC2ブログのようなJAVAスクリプトの記述が許されたブログで画像のプレゼンをするためのスクリプトを自動的に作成するツールを自作しました。
 久しぶりに、使い方がわからないとコメントをいただきましたので改めて使い方を再掲することにいたしました

 ツールは以下からダウンロードできます。ダウンロードファイルはZIP形式で保存されていますので、ファイルをダウンロードして、デスクトップなどに保存し、ダウンロードされたファイルの上でマウスの右クリックをして、出てきたプルダウンメニューで「すべて展開」をクリックして展開フォルダーを作成します。

  ダウンロード先→http://dongwcat.net/pc/tool/dongurislide.zip


 ダウンロードと圧縮ファイルの展開がわからない場合は、ネット上で「圧縮ファイルの展開」の検索キーワードで検索して勉強してください。

dongurislide.png

 上図が展開されたフォルダーの中身です。実行ファイルは、下から2番目の dongurislide.exe ですから、このファイルをダブルクリックしてツールを実行します。

dongurislidetool.png

1. ツールのウインドウの中で、「特異なIDキー」のところに、日付の数字など、2度とダブらない英数字をいれます。たとえば、今日の日付をもとに 110511 などと入力します。

2. テンプレートボタンをクリックして、画像の表示のテンプレートから選択します。

3. 次に、初期画面、写真1、写真2のところに、ブログにアップロードした画像のURLを入力し、写真説明が必要なテンプレートでは写真説明のテキストも入力します。

4. これで準備が整いましたので、「ソースをクリップボードに出力」ボタンをクリックします。これで、クリップボードにスクリプトのソースがコピーされていますので、ブログの編集画面の適当なところで、貼り付けすれば終了です。

 下の例は、カレンダーのようなスライドのテンプレートを選択して、URLリスト取り込みボタンをクリックして展開フォルダーの中の、sample.csv を選択して作成したカレンダーのようなスライドです。







クリックすると画像が入れ替わります
スポンサーサイト

ブログやホームページのスライドショースクリプト自動作成ツール

 昨年までGooのブログで続けていましたブログで写真スライドを表示するためのJavascript自動作成ツールを、Gooがスクリプトを許可しなくなりましたので、ホームページや、スクリプトを許可しているブログに掲載するために最適化して今日書き直しました。よろしかったら使ってみてください。

 17個のテンプレートの中から好きなスライドショーを選択して、画像のURLをアプリケーションの表に記入することで、簡単にソースを自動作成します。
 障子がひらくソースや、カレンダーのようにひらくソースなど、いろいろ揃えております。

 ダウンロードは以下からです
http://dongwcat.net/pc/tool/dongurislide.zip

 もしご質問などございましたら、ご遠慮なくコメントください。

5. Javascriptの変数とは

 先週はずっと平尾台に入りきりで、家にたどり着いたらぐったりで、パソコンもあまり触る気がしませんでしたが、すこし落ち着いた時間が出来ましたので今日は変数について書こうと思います。

 Javascriptの変数とは、スクリプトの中で使う数字や文字列などを格納しておくものです。お行儀のよいスクリプトでは、しっかりとスクリプトの最初で var n=1; などと正式に宣言すべきですが、ブログの中で使う場合には、突然 n=1; などと記述しても大丈夫のようです。このいい加減さは、簡単にスクリプトたかけるといういい点もありますが、とんでもないおかしな動きをしてしまう原因にもなりますので気をつけなくてはなりません。

 ここでは、nという整数をおさめる変数を、クリックするごとに一つずつ数値を増やすスクリプトを書くことによって、変数の意味を理解してもらいます。

 その前に、ID名が bangou というテキストを以下のように定義します。

<p id="bangou">現在のnの値は 1 です</p>

 マウスをクリックするソースは以下のように記述します。

<a href="#dummy" onclick="inc_n();">Click</a>

 と準備したうえで、変数nを一つずつ増やす関数スクリプト inc_n() は以下のように書きます

<script>
var n=1;

function inc_n() {

n++; //変数nの値を一つ増やします
 bangou.innerText="現在のnの値は "+n+" です";
}

 この関数の中で、nは数値ですが、Javascriptでは、文字列の中に代入された数値は文字列に自動的に変換されます。innerText はbangouというID名で定義されたテキストの中身を示します。画像の src が画像のソースのURLを示すのと同じですね。

現在のnの値は 1 です
Click

2. 場所によっては画像変更するとチラチラでするのを修正 マウスオーバー

 前回のマウスオーバーでは、画像にイベントのスクリプトを記述したために、大きさの異なる画像の場合は場所によってはつらついてしまうことがありましたので、外枠のテーブルにイベントのスクリプトを記述しました。この場合は外枠の大きさは変わりませんので、ちらつくことがありません。
 画像タグ内に記述する場合には、画像のURL変更はそれ自身ですから、this.src= としましたが、テーブルの枠ではそれはだめなので、画像のID名を p2010052801 として、p2010052801,src= としました。



<table> <td style="width:610px; height:610px; text-align:center; virtical-align:center; background-color#eee;" onmouseover="p2010052801.src='http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_3.jpg';" onmouseout="p2010052801.src='http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_2.jpg'"> <img id="p2010052801" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_2.jpg" style="border:solid 1px;" /> </td></tabele>

1. マウスオーバー、アウトで写真を切り替えましょう

 ブログでもマウスイベントを使った動く記事を書くことができます。このFC2のブログは、いろいろな面で、Javascriptの勉強をするのに適していると思います。
 私は今までは、Gooブログの制約のある中でいかにしてスクリプトを記述するかという離れ業的なことを楽しんできましたが、ここでは素直に、ブログの記事を書きながら、いつの間にかJavascrptに親しんで、自分のホームページを豊かに表現できる基礎を養うことができることを目指します。

 HTMLもXHTML5というバージョンになりつつあり、こうなるとFLASHなどの外部アドインの力を借りて表現するしかなかったことが、HTMLで表現できるようになります。アップルのiPadがFlashをサポートしない理由も、この方向だと思います。
 そんな時代の流れについていくためにも、ここでscriptに慣れていくことは大切です。

 今回は「ブログでJavascript」シリーズの第一弾として、簡単なマウスオーバー、マウスアウトのイベントを使った画像のきりかえに挑戦します。
 下の例は、違うサイズの画像を常に真中に表示するために、あえてテーブルを使ってみました。テーブルの記述も、ブログの文字数を減らすために、必要最小限のタグに限定し、table、tdのタグだけを使っています。あまりお行儀がよくないとは思いますが、ソースの見やすさからも、この方がベターだと判断いたしました。

 マウスが画像の上に乗った時におきるイベントは

      onmouseover="....Event Prog......"

 マウスが画像から外れるときにおきるイベントは

      onmouseout=".....Event Prog......"

 イベントのプログラムは、この画像のソースをいかにしますというスクリプトで

      this.src='変更される画像のURL';

 一般的なスクリプトでは、URLを囲むかっこは " ですが、外側にすでにかっこが使われていますので、混乱しないように ' でくくります。



写真は平尾台のジャケツイバラとカノコユリです Photo by Donguri

<table> <td style="width:600px; height:600px; text-align:center; virtical-align:center;"> <img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_2.jpg" style="border:solid 1px;" onmouseover="this.src='http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_3.jpg';" onmouseout="this.src='http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_2.jpg'" /> </td></table>


CSSを編集してブログを作り直してみました

CSSを編集して、ブログのカスタムテンプレートを修正してみました。
かなりややこしい作業でしたが、どうにか見れるようになったのではと思います。
私はどうも技術的な新しいことにだけ興味を覚えてしまって、ブログを積み重ねていくことは苦手ですが、今後は少しでも更新していこうと思っています。

みなさんよろしくお願いいたします。
FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。