ちょこっとプログラム

このコーナーでは、オリジナルの「デジタル遊びツール」作りをご提案しています。パソコン上で工作をするような感覚で、楽しんで欲しいです。※プログラムとかいうタイトルをつけつつ、実は全然プログラムじゃないものもあります…。※このページはJavaScriptを多用しているので、JavaScriptの設定をオンにしてご覧ください。

マウスを乗せると画像が変わる−その１

マウスを重ねると画像が変わる簡単なスクリプトがあるのですが、これを利用していろいろ面白いネタが表現できると思います。

サンプル１：元々は画像１→マウスを重ねると画像２に変化→マウスを離すと画像１に戻る
　下の女性の画像の上にマウスを置くと、彼女がウィンクします。素早く乗せたり離したりすることで、よりリアルなウィンクが楽しめます(笑)
自分のウィンク写真で作って、彼にプレゼントしてはいかがですか。

自分でも作ってみるには、サンプル１をダウンロードしてください。

マウスを乗せると画像が変わる−その２

サンプル２：元々は画像１→マウスを重ねると画像２に変化→マウスを離すと画像３に変化

画像２を自分のセクシー写真で作ってみても面白いかも？しれません。

自分でも作ってみるには、サンプル２をダウンロードしてください。

コメントアウトでツンデレを表現しよう！

コンピュータ言語には「コメントアウト」と言って、ある記号で囲むと、書かれている内容の一部を非表示にできる機能があります。 ウェブページを作るHTML言語では、<!- - と - ->で囲まれた範囲が表示されなくなります。

これを使って、ページを普通に見たら「ツンツン」だけど、HTML言語で書かれた元の文章は「デレデレ」のウェブページを作成してみましょう。

　※HTML言語の記述を読むことを、「ソースを読む」と言います。

ツンデレウェブページのサンプル… ツンデレウェブページ

画像に雪やハートなどを降らせよう！

　JavaScriptというプログラムを使って、自分の好きな写真画像に雪などを降らせることができます。彼との思い出の写真に雪を降らせたり、ハートを降らせたりして楽しんでみてはいかがでしょうか。
　友達の結婚式の写真に花びらのシャワーを降らせたりしてもいいですね。

雪が降るページのサンプル… 雪が降るページ

　このスクリプトはAltan様で公開・再配布が許可されているものです。こちらのサイトでは画像の別パターンなども配布されているので、海外サイトですが良かったらそちらも見てみてください。

自分でも作ってみるには、サンプル３をダウンロードしてください。

彼にオリジナルクイズを出題しよう！

WEST MiRa様作成の、クイズ（心理テスト）の出題フォームです。
答えをボタンで選んで、「結果を表示する」をクリックしてみてください。

これを自分でも作ってみるには、サンプル４をダウンロードしてください。

詳細は配布元の WEST MiRa様の解説ページをご参照ください。

彼に記念日を思い出してもらうための便利ツールを作ろう！

　彼が記念日を忘れていたりして、ケンカになることはありませんか？そんな人は、今日が何の日かを表示するプログラムをプレゼントしてはいかがでしょうか。

　例えばこんな感じ→記念日表示

このスクリプトは、JavaC〜JavaScriptサンプル集〜−Memorial Day様のものを使わせていただいています。

ご自分でも作ってみられる際は、出典元サイトのソースをご利用ください。元サイトでは記念日部分のコードを簡単に作成するツールも用意されています。

吹き出しはCAPSULEs様のものを参考にさせていただきました。

「私を捕まえてごらん」をバーチャルで！

　海辺でカップルが追いかけっこをして、彼女：「うふふ、私を捕まえてごらん〜」彼：「あはは、待てよ〜」っていう有名なやり取りがありますよね。実際にやるのは恥ずかしいあなたは、JavaScriptゲームにしてみてはどうでしょうか。

　このゲーム、けっこう難しいので、「私は簡単に手に入る女じゃないのよ！」というアピールにももってこいだと思います。

「私をつかまえてごらん！」ページのサンプル… 「私をつかまえてごらん！」ページ

　このスクリプトは「速効!図解プログラミング JavaScript」で紹介されているものを参考にさせていただきました。

　上記の簡易版で、簡単に捕まるものは、htmlのmarqueeタグというものでも実現できます。（下の例）
　下の女の子の画像はクリックすると止まります。捕まえてみてください。

　上記の動きを実現するための、HTMLの記述はこんな感じ↓です。HTMLファイルの中にこれを書きます。

<Marquee onmouseover=this.stop() onmouseout=this.start()> ここに文字を書くか、画像を指定する </Marquee>

marqueeタグについて

　上記で使ったmarqueeタグ、簡単に面白い動きが表現できるので管理人が一番好きなタグです。でも見ている人にとっては目がチカチカして迷惑なことも多いのでなるべく使わないようにしています…。しかしこのコーナーは無礼講？ということでたくさん使ってみます。以下、長時間の閲覧注意です。

　下のスペースでは、動物のアイコンがmarqueeタグによっていろんな動きをします。最初から見たい場合は、F5キーを押して更新してください。

参考サイト１：HTMLタグ辞書−流れる文字タグ
参考サイト２：楽しいタグ教室

上記参考サイト２では、下記のような利用例も紹介されています。可愛いですね。

(-.-)y-~~~

このサイトの管理人の独り言

　管理人は元々プログラミングには全く興味がなかったのですが、市川拓司原作の『そのときは彼によろしく』という映画で、病気のヒロインが長い眠りに着く前に、彼のパソコンに記念日を祝うプログラムを仕掛けておくという場面に感動して興味が湧きました。

デジタルなものって一般的には無機質なイメージがありますが、人が書いたプログラムはその人の「作品」で、温かみがあるんですね。恋人へのプレゼントにもアリかもしれません。

JavaScriptの勉強を独学でするなら、下記のサイトがお勧めです。JavaScriptの基本が漫画を通して学べます。
　マンガで分かる JavaScriptプログラミング講座

プログラムに興味を持たれた方にはこちらの作品もお勧めです。理系の人の考え方やSEの仕事の裏話などが読めます。
　ＳＥ兼マンガ家よしたにの「理系の人々」
コミックエッセイ『ぼく、オタリーマン。』で有名なよしたにさんによる連載。超文系人間の管理人にとっては新鮮な話ばかりです。

↑このページのトップへ戻る    HOMEへ     「無料で便利なソフト・サービス」のページへ