ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。プログラミングinventor芭蕉足跡の一つ時空と季節を超越して江戸時代の俳人、松尾芭蕉の足跡のひとつを訪ねてみます。BGMはヨーロッパの著名な民謡《ドナウ川のさざなみ》を用意しました。最上川とは趣きは異なりますが著作権がらみで世界の民謡を取り上げました。画像は小高い山から眺めた庄内平野です。音声再生ボタンを押下してなにもかもスタートです。プログラムコードについて俳句はInkscapeでPathデータを作りました。Inkscapeは漢字の振り仮名はサポートしてくれません。この作業は時間に比例して確実に進みます。このアプリが生成したプログラムコードに手を加えて画像とテキストの共存を図っています。両立のポイントはopacityを巧妙に操ることです。ソースコードの公開は故あって先延ばしになります。来年の4月から小学校においてプログラミング教育が必修化になります。プログラミングを構えすぎると難解と言えますが、自然に使っていくと入りやすいでしょう。赤ちゃんは覚えたものだけを大胆に使います。覚えたものを一つずつ使っていけばやがて高みに到達するでしょう。臆せずに使いましょう。JavaScriptを使いこなすと多彩な表現が可能です。恐縮ですが以下のサンプルは難解の部に入ります。以下のような動くドキュメントを表現できる一つの例を挙げます。末尾にHTMLコードを示します。以前に、七五三お祝いのメッセージにおいて「玲依ちゃん」の七五三を祝いました。当事者の氏名を変更することは初心者には難儀であることを述べました。名前を一筆書きのように表示するには、独自のフォントを作成するに等しくLazy-Line-Painterなどの専門知識を必要とします。ここでは「あかりちゃん」の仮名を使っていますが遅延表示をしていないので容易に関係者の名前に変更できます。BGMはフリー素材の音源を使っていますが家族で楽しむぶんには最新の人気曲に差し替えることも可能でしょう。上の図は「あかりちゃん」を表示するコードの一部分です。赤字のところを置き換えれば個別に対応できます。BGMを独自のものに差し替えるにはaudio要素のsrcに音声オブジェクトの格納アドレスを指定します。出来合いの作品だけでなくオリジナル作品をどしどし発表して存在感を発揮してください。文書に至急、極秘、複製を禁ずなどの文字を文書に重ね書きして注意を喚起する方法があります。古いWORDではあらかじめ用意した文字を重ね書きしていましたが今では自由に文字列を指定できるようになっているようです。HTMLはテキストのほか画像や図形の重ね書きが可能です。そのうえ、透過率のopacityにより多彩な表現ができます。ここでは書類の絵文字(📄)をPDFの説明文に重ね書きしています。HTMLはフリーで使えるほか、より良い品質を目指してグローバルな協議会にて管理されています。Format」の略で、データを実際に紙に印刷したときの状態を、そのまま保存することができるファイル形式です。パソコンやスマホなどのデバイス、Windows、iOS、Linux、Unix、AndroidなどのOSの垣根を超えて見ることができる「電子的な紙」です。Format」の略で、データを実際に紙に印刷したときの状態を、そのまま保存することができるファイル形式です。パソコンやスマホなどのデバイス、Windows、iOS、Linux、Unix、AndroidなどのOSの垣根を超えて見ることができる「電子的な紙」です。プログラミングinventorおあずけテレビ番組やプレゼンにおいてフリップに付箋紙をかぶせて最初は見えないようにし気を持たせるおあずけ手法があります。めくりフリップについては当ブログでは数度、取り上げています。先の例では一度めくると元の戻すことができませんでした。再度クリックすれば目隠しが元に戻るようにした例を以下に掲げます。参考になれば幸いです。height=152></div></html>おまけ御出座(ごしゅつざ)とはおでましを言います。ぁ~!(きたまちぶぎょう、とうやまさえもんのじょうさま、ごしゅつざぁ~)のきめ台詞が浮かびます。プログラミングinventorトリミングの新しい試み横長画像をトリミングあるいは切り抜きをするとき、幅が大きくなると扱いが面倒になります。今回、object-fit:coverとobject-positionを使って部分画像に光を当ててみました。複数の写真をかなりの枚数ごとにまとめて管理することがあります。一般に画像はサイズが大きくそれをまとめるとさらに大きくなりますが、管理のしやすさを優先する場合があります。指定された画像をどのようにはめ込むかを設定します。object-positionプロパティを用います。object-positionは切り取る位置を全体サイズとの比率で指定します。今回、pxなどの単位で絶対指定する方式は思ったような動作は得られていません。動作確認された%による配置を以下に示します。ブラウザの再読み込みボタンで何度でも動作出来ます。3000);//3秒ごとに8枚の画像を描画する。</html>プログラミングの肝はsceneChange関数の呼び出し回数カウンタ(m)がグローバル変数、表示画像を指定する変数pをローカル変数に定義することです。その理由は別の機会に語ります。雑感object-fit:coverとobject-positionを使った画像のトリミングを体験しました。切り抜いた画像の配置にはobject-positionを利用しますが0%で左端、100%で右端の画像が選択されます。切り抜きの設定例をHTMLコードの11行目に示します。8枚の画像を順に切り取る場合は7等分のような設定になります。最初に決めた仕様に後でつじつま合わせをしたような違和感を覚えましたが先に決めたが勝ちでしょうか。プログラミングinventorイベントを盛り上げるツール結婚式や創業祭などは人生の中でそう何度も体験しないものです。記念のイベントを催すに当たり、特注のビンゴゲームで盛り上げてみませんか。それを制御する中核はスマホに収納されています。会場の映像設備がユーザーに開放されるかどうかにもよりますが、スマホの画像をオンラインで表示できる時代です。スマホ、パソコン用に開発したオンラインゲームで人生の節目にインパクトを付けて見ましょう。今回、オリジナル画像は開始時、終了時には主催者を称える動画が表示されます。ビンゴ番号が更新されるタイミングで参加者をクローズアップして描写する演出が可能です。主催者のアイデアに寄り添い世界に二つとない企画でイベントを盛り上げよう。ビンゴ籠をクリックして開始です。ビンゴ籠の回転はChromeブラウザが脈動なしでスムースです。プログラミングinventorAバージョンビンゴゲーム管理ソフトでAバージョンをリリースします。改良点はたくさんあるようですがを一応の区切りです。アメリカの半導体ビジネスでは製品化済みの商品の改訂版にはA,B,Cと枝番を振る慣わしがありました。Intel8080が世に出ましたが、使いにくい点を改訂したのがIntel8085でした。改良して8085Aが出荷されたと記憶しています。それに因んでAを使ってみました。改良点は実際のビンゴマシンの動きに近づけて一度使ったビンゴボールを使わないようにして空(から)くじをなくしたことです。ビンゴボールの番号は1~75の75種ですが、一度出現した番号は二度と現れないような処理を追加しています。抽選回数が増えるごとに動きが軽くなります。これら動作は電子的システムの得意とする分野です。参加者ごと、抽選回数ごとの処理の切れ目が分かるように間を置いたり背景色を変えています。背景色変更の効果が記事全体に及ぶのはやり過ぎでしょうか。「あちら立てればこちらが立たず」一筋縄ではいかぬものです。結婚式場などのイベント会場には巨大モニタ画面が備わっているようです。パブリックビューイングでスポーツなどが観覧できるようになりましたので、紙による抽選ゲームからエレクトリックゲームへの転換が一段と進むことでしょう。さらなる改良点1参加人数の入力2カード番号と参加者の対応付け3抽選タイミングの指定4ゲームの記録を残す管理機能付きビンゴゲームの動作例ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで時間がかかりますが一度、リーチやビンゴが起きればにぎやかになります。今回、抽選のタイミングで背景色を変更しましたがウィジェット欄を含むすべての背景色に及び期待した動作ではありません。ローカル環境では問題が起きてないので、調査を進めると当記事のJavaScriptオブジェクトidに”main”という名付けをしていることが原因でした。この名前はウィジェット欄を表示させるコードで既に使用されているようです。id名をユニークな名前に変更したところ、期待した動作が得られました。ウィジェット欄のコードはWordPressなどのサポートシステムが管理しているので個別に確認することはできません。ウ~ムなかなか難しい問題と言えるでしょう。プログラミングinventor追加された新機能ビンゴゲームを作って楽しく遊ぶための研究用記事です。今回、20人のビンゴゲーム参加者のゲーム完成状況を時々刻々、表示する機能を追加しました。ひとりのビンゴカードにおいて縦、横、斜めの12組がビンゴマシンが発する番号と如何に合致しリーチやビンゴ状態に達したかを一目で把握します。ビンゴマシンが1~75の数を決定すると参加者はビンゴカードにその番号があるかどうかチェックし、あればその部分に穴をあけます。12組のどれかに4個の穴がそろったらリーチと、5個の穴がそろったらビンゴと叫びます。確率的には少なくなりますが2組、3組、4組が同時に成立することもあります。その時は一段と気張ってダブルリーチ、トリプルビンゴなどと声を出してもいいかもしれません。これら一連の動作をビンゴゲーム管理ソフトが処理します。カードマシンの籠から出たボールは再び籠に戻ることはなく、そのため空(から)くじが起きることはないでしょう。このチェックはまだ施されてないのでたびたび空くじが起きています。空くじなしにする方法で可能ですが実施は次回以降になります。空くじなしというか必ずどれかにヒットする完全な方法は、20人全員の発番に用いたボールのみをビンゴマシンの籠に用意します。加えて使い切ったボールを削除する処理を追加すればいいようです。処理的には1~75のうち、利用したボールの値を、例えば999などと改変し、ソーティングして小さい順に並び替えその上、発生する乱数を1~74と小さくしていきます。それをインデックスにして先ほど並び替えたテーブルを参照してマシンが発番する番号にします。これを繰り返せば空くじはなくなるでしょう。それにしても空くじはしらけます。早めの対応が課されているようです。管理機能付きビンゴゲームの動作例ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで辛抱強く待ってみましょう。一度、リーチやビンゴが起きれば声が重なるほどにぎやかになります。プログラミングinventor音声の作り方ビンゴゲームを作るに当たり、MP3やWAV形式の音声を作るには、テキストを音声に変換してくれるサイトが便利です。Textを利用させていただきました。サイトを参照すると上図の1の画面が現れます。Text欄に変換する文言、Voice欄で言語を選択してSubmitをクリックすれば、2の画面が現れます。変換するテキストを確認してDOWNLOADをクリックすると、所定のフォルダにmp3ファイルがダウンロードされます。「リーチ」、「ビンゴ」などの掛け声や感嘆詞音声はサイト上に多く存在し、ダウンロードフリーのものを用意できますが、ユーザーフレンドリーなメッセージは独自に準備します。『カード番号一番さん、ビンゴ完成です。あめでとうございます。』のようなメッセージ音声ファイルを作りました。《音声で意思疎通!》けさ、ちょっと言い過ぎました。border="1">《音声で意思疎通!》<BR><BR>けさ、ちょっと言い過ぎました。ヒット状態を一覧表に表示するパーツを作成しました。thやtd要素へのアクセスは独特の方法がありますが、ここではそれぞれにidを付加したオーソドックスな方法を採用しています。背景色を動的に設定するにはdocument.getElemeniById(‘idxx’).style.backgroundColorに背景色を代入します。下の図に示すようにカード番号3番の12組のヒット数を表示しています。G列がビンゴ、5行目がリーチであり、背景色をそれぞれマゼンタ、ディープスカイブルーでそれ以外はヒット回数を表しています。余談ですがスタイルシートにはbackground-colorプロパティがあり、背景色を指定するにはstyle.background-colorとすべきですが、-(ハイフン)はマイナス演算子と誤解されエラーになります。そのため、ハイフンを省き次の文字を大文字にするのが習わしです。拡張して右の図のようにサインカーブを描いてみました。サイン値は0~2π間で-1~1の値を採りますが、角度を1~12、サイン値を12組に引き当てています。