ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。中秋の名月、スーパームーンが過ぎて、秋が深まってきました。秋の花々を24枚の写真に収めました。デジカメ販売会社製やパソコン、スマホ備付けのスライドショーで閲覧することができます。BGMが流れ、切り替え効果で味を付けながら思い出の写真を見ることができますが、既存の表示には飽きを感じているマニア向けにスライドショーを自作しました。発展途上で既存のものと勝負する段階ではないので、スライドビューと呼ぶことにしました。➊写真枚数が24枚と多くないので、規則正しい6行4列の集合写真にする。ペイントの表示タグでルーラー、グリッド線、ステータスバーにチェックマークを入れ合成写真を作成する。➋ブログやホームページでアップロードする画像サイズは2MBに制限されているので、デジカメで作成した画像を1%に縮小する。リサイズ超簡単などのフリーソフトでリサイズする。➌リサイズしても2MBを超えることがあり、レンタルサーバーのユーザー専用ページからログインし、PHP.INIを修正してアップロード可能画像サイズを20MB等に変更する。➍集合写真をアップロードし、URLアドレスを抑える。➎drawImage関数を使って1枚の集合写真からトリミング画像を取り出す。type=”number”を使って、表示時間と表示枚数を設定するコードを作成する。➐1ページに1~4枚の写真を同時表示するコードを作成する。➑同時表示枚数に応じた画像サイズを処理する。➒主要ブラウザの最少機能に合わせた描画仕様を決定する。上図の〇印付近にカーソルを当てると、上下マークが現れます。上下スイッチにより数値を変更して右の決定キーをクリックして表示時間や表示枚数を入力します。上下マークが現れないブラウザでは左端で数字をキー入力します。音楽は怪しくコミカルな甘茶の音楽工房の『夜のワルツ』です。終わりにWebプログラミング書法関連で多くのプログラムコードを公開しました。今回、サンプルコードは公開されませんが、WebProg5をひな形にして作成されました。順を追って作成すれば、スライドビューにたどり着くことでしょう。表示画面はウィジェット欄への表示を抑制したフルサイズ仕様です。園芸inventor秋には萩が似合います。い」「柔軟な精神」「柔らかな心」と面映ゆさ・奥ゆかしさを基調としていますが最後に「前向きな恋」があります。多くの花々が万葉集に登場します。「萩」はことのほかよく詠まれています。ここではラストイメージに響いた話に進むことにします。萩の紅い花びらは女性器のデリケートゾーンに似ていて、ある地区ではまさに女性器そのものに近い呼称もあるようです。萩とともに取り上げられる牡鹿の角は男性生殖器を象徴しています。万葉集には艶っぽくポルノチックで深遠な和歌が多く謳われています。万葉集から2句、取り上げました。深まる秋の夜長にまんようびとの心意気と風流を偲ぶことにします。プログラミングinventor親しみのある動物の絵柄をモチーフにした絵そろえゲームです。同じ絵が2つないし3つ現れたらファンファーレが鳴ります。くじらは幸運を呼びます。ゲームの作り方はWebプログラミング書法を参照してください。プログラミングinventor負荷の軽減を実感するを実行します。コードサイズがWebProg4と較べて95行から80行に縮小されていることをご確認ください。プログラミングinventorさて、本日の運試しをやってみましょう。プログラミングinventorサンプルプログラムコード2でも、システムが持つ再読み込み機能を指定すれば、再開処理を実行できましたが、確定・再開ボタンを設けることによって処理をスピードアップすることができます。ボタンは当初、確定を待つ状態にありクリックされると再開を待つ状態に切り替わります。クリックされるたびに状態が反転します。プログラミングinventorクリックして出る目は10種類あり選択した目が出る確率は10%です。10回に1回の大当たりは実際のところ、もっと低い確率に感じられます。プログラミングinventor幕開けに運試しのプログラミングに挑戦します。0から9までの数字が連続表示されます。’7’を出すことを念じ、ころあいを見計らって’確定’ボタンをクリックします。’7’が出たら今日はついていると考え、そうでなければ、そこそこの一日と思って業務に励みましょう。【性格診断】「0~9」数字を選ぶだけであなたにぴったりの結婚相手が分かるでは選んだ数字で結婚運を占っています。興味のある方は挑戦してください。それでは運試しをどうぞ!確定をクリックして好みの数字を表示させることができます。次のコードをコピー&ペーストし、Fortune-01.htmlファイルを作成します。IE8、FIREFOX、OPERA12、SAFARI6、CHROMEなどの新しいブラウザが動作状態ならば、保存したFortune-01.htmlファイルにカーソルを当てクリックすれば実行に移ります。プログラミングinventorこのページは本日の運勢を占うゲームを作りながら動きのある文書作りをするための手掛かりについて述べられています。改訂のポイントお子様と一緒に終わりに関連ページはじめに以前にあみだくじ作成法を発表しましたが、動作デバイスはスマートフォンでJavaを用いて開発されました。今回は動作デバイスに限定せず、JavaScriptが動作する環境であればどのデバイスでも動作するように配慮されています。今日の運勢を占うゲームを作り、楽しみながらJavaScriptで表現豊かな文書作りを目指します。個々のWebプログラミングは少しずつ進化し、リンクが貼られた独立したページ(例、《1》運試し...)に仕立てられています。1.文書記述言語HTML世にはアプリケーションと称される利用者の業務を支援するプログラムが多く存在します。それらは専門知識を有する技術者の独壇場で、その上、複雑な手順を踏んで作成されていました。ここではHTML,JavaScriptに的を絞って簡単なプログラムを作ってWebドキュメントに埋め込みます。上図に示すようなドキュメントにおいて、全体的な構造に対するそれぞれの記事を表現するにはこれまでの記述法ではあいまいさがあったり、動画や音声を織り交ぜたり、グラフィック描画は難しいものがありました。ウェブ上で動作する表現形式は文書記述言語HTMLを用います。その規格は改訂を続け5版をHTML5と言います。HTMLは左図に示すように半角の<と>に挟まれた開始タグと終了タグに囲まれたブロックの集合体です。説明文の中に、実際の半角<を入れるとタグの一部と見做されて正しい表現にはなりませんので全角<を使うことが一般化しています。HTML5の正式リリース2016年にHTML5.1が正式に勧告される予定ですが、それまでは使用できないのかというとそうではありません。主なブラウザにはすでに実行環境が実装され、動的なウェブサイト構築や、インターネットアプリケーションなど高度なユーザインタフェースの開発が可能になっています。プログラミングのいろはウェブ上では当初、静的コンテンツ表現が中心でしたが、JavaScriptにより動的なコンテンツを制御する機能が備わり、スマートフォンやタブレット端末との相性の良さを好感しています。JavaScriptとは、インターネット上のWebページを記述するプログラム言語の1つです。javaというプログラミング言語とは別ものです。Webページに、動きや対話性を付加することを目的に開発されたオブジェクト指向のスクリプト言語で、クライアント環境で動作します。HTML5にはJavaScriptが使えるように仕様が策定されています。ここではJavaScriptを用いたプログラミングにスポットライトを当てていきます。当初は0~9の数字を表示し続ける簡単なプログラムから始め、だんだんと機能を追加していきます。新しいことを始めるにあたり、いろいろな手法が考えられますが、当ブログでは難解な部分はとりあえず棚上げし、サンプルコードを参照しながら同じことを実践し体験していくことをお奨めします。次のリンクからサンプルコードを実行します。簡素化のため、前のページに戻るコードは用意されていませんので上図の赤〇印キーをクリックしてこのページに戻ってください。《1》運試しのプログラミングを実行2.JavaScriptでプログラミングすでに前項でJavaScriptでプログラミングが使われていますが、プログラムコードとHTML5との関連を述べ、HTMLドキュメントに厚みを加えていきます。HTMLの構成例HTMLはテキストや写真などで構成されることが多いのですが、文書にJavaScriptなどのスクリプトを組み込むscriptタグがあります。ここからはプログラムコードを定義しますというタグです。/scriptまでの範囲です。記事の中に、本日の日付、曜日、元日からの通算日や天気予報などを自動的に掲載したいときがあります。このような場合はプログラムコードを埋め込むことにより実現可能になります。紙媒体の百科事典では無理ですがWebページでは容易に実現できます。本日の運試しをするために、占い小道具の水晶や筮竹(ぜいちく)を用意した占い師に電話して吉兆を連絡してもらうのは現実的ではありません。そこで前項では遊び心で、運を試す例を示しました。プログラミングすることにより、グレゴリオ暦時間データやクリックタイミングなどを入力値にして、文書をその都度、改訂することなく、読者が納得する結果を提供することができます。運試し第2弾プログラムコードを少し進化させて、クリックタイミングで結果を出すように処理を加えていきます。❶0~9のうち好みの数字を選ぶことができる。➋クリックして出た数字で当たりはずれに対応したメッセージが出力される。日本製商品は心配りに富んでいると語られることがあります。他国製商品が雑かというと不明です。前の話ですが、「ドイツアウトバーンにはブレーキ故障対策のため、上りこう配の横道が用意されている」と聴いたことがあります。使い勝手・使いやすさのよい商品は体になじみます。プログラミングを上質化して使いやすさを向上させます。一度、記事を読み込むと2度目はシステムが保有する再読み込みをしなければなりませんが、再開を支援する処理を施せば使い勝手が向上します。あまりにスピードアップされ、音声が鳴りやまないうちに再開を指定後に確定した場合、音声ファイルの処理が追いつかないくらいです。❶確定ボタンを確定・再開ボタンに機能を変更する。➋確定・再開ボタンの状態を記憶させる。➌再開処理を追加する。➍確定処理では、当たり・はずれを判定し、適切なメッセージを出力する。《3》再開処理スピードアップを実行4.本格処理の追加ゲームは難解さを含んでいないと飽きがきてつまらないものになります。数字付き回転ドラムは1桁より3桁がゲームとして面白味が増します。最後に、バージョン管理や著作権所有のメッセージを設定します。運試し第4弾スロットマシンのように3桁の数字をそろえ、ねらった数字が出たらファンファーレを鳴らします。❶数字を1桁から3桁に拡大する。➋当たり判定を3桁の数字にする。➌桁ごとに表示色を変える。➍当たる確率が高くなるように修正を加える。➎数字は乱数を発生させて決定し表示する。➏当たり種別をはずれ、当たり、大当たりの3種にする。➐copyrightとVersion番号を追加する。➑3桁処理になり処理の共通化のため、関数化を図る。ウェブアプリケーションでは画像、音声データは別々であり、思った以上にシステムが巨大化します。0~9の数字を絵柄化すると10個の画像ファイルを用意し、事前に読み込んでおかなければなりませんが、工夫をすることによりプログラムコードのシンプル化を図ることができます。配列化を図る似たようなデータは配列化を図ることによってコードを縮小させることができます。似たデータでない場合はコード化をすることによって規則性のあるデータになります。一クラスに40人のクラス員がいるとき、クラス員の氏名をコード化し配列に格納します。10種の数字絵柄を1枚の画像にまとめ、添え字付きデータして扱えば、画像データと初期化処理が極端に小さくなります。画像トリミングによる画像統合トリミングとは写真の構図を整えるために、不要な部分を除くことを意味します。この機能を利用して個々の画像を横に並べ、まとまった大きな集合画像を作成し、必要な画像データを規則正しく変化させて複数画像のように扱い、負荷を軽減してシステムのシンプル化を図ります。画像トリミング機能は9つの引数を持つdrawImage関数の拡張版フルスペック機能として用意されています。今回は10個の画像を上図のように2行5列にまとめ、drawImage関数にクローズアップ領域を指定して必要とする果実のみを描画させることができます。ついでに、はずれ、当たり、大当たりの画像も1枚にまとめます。このようにプログラミングしておけば、当たり状態を3から5に増やした場合は、5枚の画像を1枚にまとめた画像ファイルを用意すれば済むことになります。❶はずれ、当たり、大当たり画像を統合したオブジェクトを作成。➋音声参照IDテーブルを作成する。➌確定/再開処理で当たり画像をトリミング描画する。➍音声参照IDテーブルを使って音声を鳴らす。➎回転ドラム画像をトリミング描画。《5》負荷の軽減実感を実行6.やわらかさを加える乗り物や動物を見ると童心に戻ったような気分になります。スロットマシンを思い浮かべる絵柄から親しみが湧く絵柄に改訂しましょう。スポーツなどを挙げることができますが、親しみのある動物を選ぶことにしました。自分の使い勝手に合わせられる機能を持つ商品は高級です。利用者の年齢や習熟度に合わせて描画切り換え速度を変更してみます。50ms~5000msの間で変更可能です。数字を直接入力するか上下の矢印キーを押下して設定します。描画切り換え速度が1000msを超える大きな値では、後だしジャンケンのように、上の3つの画像の揃い具合を見て確定ボタンをクリックすれば、当たり、大当たりが得やすくなります。利用者の運勢を占う様から遠のきますが、小さなお子様が遊びやすいように配慮されています。改訂のポイント❶回転ドラムの絵柄を変更する。➋描画切り換え速度を可変に。➌時計方向に数字を回転表示。➍大当たり、当たり確率アップ。終わりにJavaScriptを用いて小さなゲームを作ってWebプログラミングの楽しさをまとめてみました。動的なHTML5文書を作成してブログ、ホームページに公開するには、プログラムコードが含まれます。記事は一般に、ビジュアルモードで作成されますが、プログラムコードを含む場合はテキストモードにして詳細な設定をします。テキストモードでの記事作成には、細かなノウハウを要します。折を見て今回の記事作成手順を発表したいと考えています。高い技量や知識を独り占めすることがあります。めぐって争いも絶えません。オリンピックのエンブレム問題で揺れていますが、著作権が確立した時代でもすんなりと事が運ばないようです。修行することになります。今ではネット上に大量の情報があふれていて、選択すれば独力で何かを成し遂げることが可能です。Webプログラミングについても然りですが、経験豊富な先人に教わらないと無駄なことをしていたと後で気づくことがあります。失敗例その失敗例を示します。カウントダウンとして1秒ごとに99,98,97...のように画面に表示させる場合、99と表示させ1秒後に2個のバックスペースを表示して98と表示させたり、前の表示文字を消すため、同じ場所に白色で99を表示させ、その後、98を表示させる方法がありました。BASICやCでは上記方法で問題なく表示されましたが、JavaScriptでは表示品質がイマイチです。試行錯誤でいろいろ体験するうち、clearRect関数が見つかり胸をなでおろしています。原始的な方法と改良した方法の2つを示します。左(旧来方式)、右(改良方式)で品質の差にご注目ください。動作例プログラムコード主関数部のみを以下に示します。おわりに習うよりは慣れよ方式は最初から高いレベルは望めません。徐々に改善をはかります。