月別アーカイブ: 2017年7月

数え歌仕様四字熟語

数え歌

数え歌は民衆の素朴な感情を歌にしたものが多いです。仕事にまつわるもの、生活に密着したもの、性教育的なものと様々です。

一つとせい…と一から順に繰り上がってダジャレ的な言い回しで歌い継いでいきます。日常の生活を歌いこんだり、お上のやり方を揶揄したり様々です。

「いちじく、にんじん、さんしょにしいたけ…」、「お手玉のうた」など、伝承遊戯に関するノリのいい数え歌は限りがありません。数え歌は世界共通の文化であり、ちょっぴり世界を意識して英語の短文を載せました。

かつて、輪環の順仕様四字熟語で「一石二鳥」、「二人三脚」などダブル連番で繰り上がっていく数え歌を掲載しました。それを今回は横スクロールで画像を緩やかに切り替える方式です。

ダブル連番数え歌

再度、描画するにはブラウザのロードキーをクリックします。





ダ・カーポ(da capo)

自由研究のはじめ

おすすめ

夏休みの自由研究の一例を示します。小学生向けにビスケットなどの簡易ビジュアル言語を使ってかなり高度なプログラミングをすることができます。

ここはテキストの文章に画像を加える方法を示します。

作成の順序

まず、JavaScriptが動作する環境を設定します。パソコンやスマホで当初はJavaScriptが動作しないように設定されていて、許可を指定した時に動作が可能になりましたが、今では効果的な表示をするために、初期値が動作可能状態になっています。

あなたのブラウザでJavaScriptを有効にする方法を参考にしてください。



JavaScriptが動作しない場合は、ブラウザに動作の許可を設置してください。操作は簡単ですが機器により異なるので上記サイトなどを参照して調査します。

作成手順

テキストエディタで文面を作り、○○○○.htmlの名前で保存します。拡張子がhtmlであることが必須です。

5行目にオリジナルな文章をセットし、3行目には飛び切りの勇姿画像を指定すれば、大きな達成感が得られるでしょう。



初めて、JavaScriptプログラミングするのならば、以下のコードをそっくりそのままコピーして動作させます。ファイル名はMyDiary.htmlでいかがでしょう。正しく動作すれば、これだけでもプログラミングの楽しさと芸域の広がりを体感できます。

サンプルコード

<DIV style="position:relative; left:0px; top:0px;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/notebook.png" width="432" height="323">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/suiyoku.png" width="99" height="130" style="position:absolute; left:290px; top:182px;">
<div style="font-size:26px; color:mediumblue; font-family:serif; position:absolute; left:30px; top:60px;">
今日、お父さん、お母さん、<BR>僕、妹の四人でプールに出か<BR>け、はしゃぎまわりました。<BR>お父さんと競争した<BR>り、妹にはおよぎを<BR>教えました。
</div>
</DIV>

HTMLコードの説明

①1~7行、重ね書き区域を定義する。タグは大文字と小文字を区別しないが対応付けを明示するために、大文字を用いる。
②2行、ノートブックの画像を読み込む。
③3行、水浴姿の画像を読み込む。
④4~6行、絵日記の文章の色、フォント、書体、位置を指定する。ここのタグは小文字を用いて対応付けをわかりやすくする。<BR>は改行です。
⑤5行、絵日記の文章をセットする。

絵日記

今日、お父さん、お母さん、
僕、妹の四人でプールに出か
け、はしゃぎまわりました。
お父さんと競争した
り、妹にはおよぎを
教えました。

静から動へ

サンプルコードで示した内容はHTML書式の書類です。今回の表現方法を理解すれば、文字の考案とともに数千年、連綿と続いてきた土、粘土、樹皮、紙による静的な表現から、音声や色、動きなどを含む多彩な動的表現を体得する第一歩と言えましょう。

次へのステップ

今回はたった7行で絵入り日記を作ることができました。次の機会には、音声データを加えて日記の表現に厚みを加えてみたいと考えています。

 

奥の細道・序文を改訂

バ―ジョンアップ

「奥の細道・序文の朗読記事」をバージョンアップしました。ボランティアにより公開された朗読を使わせていただいていましたが、このたび、朗読参照として明示しました。その他、細かな箇所が改訂されています。

吟遊詩人

吟遊詩人と言えば、中世ヨーロッパにおける高貴な宮廷婦人の恋愛を歌った抒情詩人を思い浮かべますが、芭蕉の句に『蚤虱(のみしらみ) 馬(うま)の尿(ばり)する 枕(まくら)もと』があります。花鳥風月を慈しんだ素朴な歌人の人柄がしのばれます。

奥の細道・序文の朗読

つき百代はくたい過客かかくにして、きかふとし又旅人也またたびびとなりふねうえ生涯しょうがいをうかべ、うまくちとらえておいをむかふるものは、たびにしてたびすみかとす。古人こじんおおたびせるあり。
もいづれのとしよりか、片雲へんうんかぜにさそはれて、漂泊ひょうはくおもひやまず、海浜かいひんにさすらへ、去年こぞあき江上こうしょう破屋はおくくも古巣ふるすをはらひて、
ややとしくれ春立はるたてかすみそら白河しらかわせきこえんと、そぞろがみものにつきてこころをくるはせ、道祖神どうそじんまねきにあひて、とるものにつかず。
ももひきやぶれをつづり、かさつけかえて、三里さんりきゅうすゆるより、松島まつしま月先心つきまずこころにかかりて、すめかたひとゆずり、杉風さんぷう別墅べっしょうつるに、
 くさ住替すみかわぞひなのいえ
面八句おもてはちくいおりはしらにかけく。
芭蕉     曽良
©TacM,2017 Ver0.03
 月日は永遠に旅を続ける旅人であり、来ては去り、去っては来る年もまた同じように旅人である。船頭として船の上に生涯を浮かべ、馬子として馬のくつわを引いて老いを迎える者は、毎日旅をして旅をすみかとしている。古人の中には旅の途中で命を無くした風流人が多くいる。
 私もいつの年からか、ちぎれ雲が風に吹かれて漂うように誘惑されて、旅に出て歩きたい気持ちが我慢できず、海や浜辺をさすらい、去年の秋、隅田川の畔を破れ小屋において蜘蛛の巣を取り払って暮らしているうちに、次第にその年も暮れ、春になり霞(かすみ)が立ち込める空を見るにつけても、あの名高い白河の関を越えようと、人の心をそわそわさせる神が取り付いて私の心を狂わせ、道祖神が招くような気がして取るものも手につかない。
 旅行着の破れ目を直し、笠の紐(ひも)を付け替えて、足に灸をすえると、あの有名な松島の月の美しさが真っ先に気にかかって、住んでいる家は他人に売り、杉風の別宅に引越しする時に、句を詠んだ。「草の戸も」の句を発句とする連句の初めの8句を草庵の柱に掛けておく。(現代語訳)

 

童謡あめふり

まもなく梅雨明けか

家庭料理で毎食、同じメニューが出てくるのはどういうわけかと疑問に思っていると、賞味期限切れまぎわの食材がたくさん残っているという体験をしました。似たような理由でもうすぐ梅雨明けです。急いで雨にまつわる話を進めます。

以前、歌詞が一番から五番まで番ごとに同一の画像でBGMに同期して表示する記事を掲載しました。このたびは、《Marquee with CSSプラグイン》を採用して、横長の画像をスクロールして童謡を流す試みをしました。

童謡あめふり
オルゴール開始©TacM,2017 Ver0.01 🉑


※※

新しい道案内

 

アップロード成功

HTMLやJavaScriptの文面を作成するとき、下書きや試作版をローカル環境で動作確認します。その後、公開サーバーへのアップロードという手順を踏みますが最後の砦たるアップロードがすんなりクリアできないことが多々あります。

jQueryライブラリーであるハイパーラプス関連の情報はまだ、少なく高いハードルを乗り越えられずに悶々としていましたが、ついに超えることに成功しました。jQuery関数をラップせずに使ったためであり、WordPressではエラーが起きるようです。上の図で下に示した使い方でエラーは起きなくなっています。

確認できた動作条件

1024*547と1280*653のモニタ画面で満足のいく描画が得られました。縦長でも動作しますが、見やすい表示ではありません。スマホやタブレットでは横長で閲覧ください。

何故にアップロードにこだわるか

例えば、取扱説明書は動画にして目ばかりでなく、耳にも訴えるとさらにわかりやすい説明が得られます。字幕の有無や表示言語は動画でも選べますが、初心者向けに内容を変更することはおいそれとはいきません。HTML文書にJavaScriptコードを入れると動的な表現が可能になります。

そのため、固定的な動画でなく、動的に表現するJavaScript文書が望ましいのです。それには公開サーバー上で動作する必要があります。

動的な表現例

箱根駅伝94回の動画を示します。最後の読売新聞東京本社前から芦ノ湖までのハイパーラプスによるストリートビューで左上の地図を表示して、動画にてどの位置を描画中かを表示していますが、地図に隠れる部分の街頭風景を見たいときがあります。

シアン色の丸ボタンで動作モードを切り替えることができます。動画を作成してユーチューブなどにアップロードし、そこへのリンク情報を埋め込むやり方では、このような細かい描画をすることが難しいです。また、ユーチューブ画面よりは画質がはるかに向上していることもお分かりになります。

では開始ボタンをクリックして新しい道案内を満喫してください。

盆竃(ぼんがま)

屋外で楽しむ行事

7月14日頃、盆竃(ぼんがま)という屋外で楽しむ行事があることを知りました。バーベキューは肉の丸焼きという意味でしょうから欧米の文化です。

外で火を燃やして食事を楽しむ行事は各地にあります。山形の「芋煮会」などは有名です。キャンプという文化もなんとなく欧米文化です。

スキー、登山などもスポーツとしては欧米からの渡来ですが有史以来、日本でもあったわけですからしっくりしません。権威づけが行われスポーツ、文化として体系づけられたのが近年ということでしょうか。

盆中の行事

お盆期間中に河原や広場で仮設の竈を設置し、持ち寄った食材で調理して食事を楽しむ風習があるそうです。

今では無届けで焚き火をすると警察に通報されたり住みにくい世の中です。

キャンプをするには環境が整備された「キャンプ場」を選択し、入場料を払って利用します。管理化社会では何でも枠内での行動が強いられます。

自らの考えで行動する資質を養うには、無人島に出かけ小グループでサバイバル生活をしなければなりません。

管理化社会

どの無人島を選ぶか、島での生活を如何に過ごすかは企画者から与えられます。管理が極度に進んだ社会ではやむを得ないのでしょうか。

お釈迦様の手のひらで遊ばされているようです。

 

多彩な動画への試み

ひさかたぶりのハイパーラプス

グーグルストリートビューをコマ落としして旅の案内版動画集を作った体験を、比叡山延暦寺までご案内比叡山延暦寺まで案内日本文化の源流を訪ねるなどに発表しました。

日本国中の主要地点がグーグルストリートビューの管理下に置かれ、オフィスに居ながらたちどころに周辺雰囲気をつかむことが可能になっています。そして、始点、経由点、始点を指定すれば高速で道案内をしてくれます。修学旅行、バス旅行、大学駅伝、市内マラソン大会などの道案内に利用することができます。

ハイパーラプスという公開された手法を採用するとストリートビュー街頭風景を動画に収録できます。キャッシュメモリに動画を作成するまでは数分の所要時間を要しますが、作成された動画はあっという間に表示されます。このたび、この速度を調整する方法がわかり、ゆっくり表示しています。

画面設計

横940、縦500ピクセルの画面を想定し、動画作成までの途中経過を以下のように画面を分割して表示します。

全画面表示用のpanoをmap3(info)、text(movie1)、expl、movie2、調整用区画に5分割し、map3はinfo、textはmovie1と別名で利用するので7つの名前付き領域が定義されます。

動画作成のポイント

ハイパーラプス(hyperlase)という公開されたjQueryライブラリーを使ってJavaScriptでプログラミングしています。

以下に示す動画を作成するには、次のような知識の吸収が望まれます。

❶ハイパーラプス
❷グーグルマップ
❸グーグルストリートビュー
❹マーキー手法
❺div要素による図形の重ね合わせ技術
❻逆ジオコーディング
❼音楽・画像のイベント処理
❽図形の透過描画

箱根駅伝94回(2018)

動作例をYouTubeにアップロードしてあります。画面右下にカーソルをかざしYoutube操作ボタンにより全画面表示が可能です。

おわりに

今までは、Javascript言語でライブラリーを組み込み、ローカル環境で動作させていましたが、公開サーバーにアップロードして動作させるのが本筋です。

今回は本筋を目指しましたがクリアすべき障壁が多すぎ、断念せざるを得ませんでした。

JavaScriptによるストリートビューイングでは左側中央のボタンのクリックにより左上隅に地図の表示・非表示切り替えが可能です。これを実現するにはハイパーラプスにまつわる詳細仕様の解明が待たれます。

灼熱の夏も終わり、スポーツの秋が訪れると市民マラソンが目白押しになります。

大会の盛り上げ企画として、夏休みを利用して市内一周ストリートビューイングの開発に挑戦してみてはいかがでしょう。