inventor のすべての投稿

敗者が復活できる世の中か

変化のない時代

強大な力を所有しライバル勢力が弱体化した時期には指導者は大胆なことをすることができます。

抵抗勢力がそれなりの力を持っている場合は即効的な政策に終始し、後世の歴史に残るような大技を発揮することは難しいです。

大体は人気取りに向かい、表面的な受けの良い政策に走りがちです。

安定はともすれば改革を忘れ閉塞感が漂う暗闇と紙一重です。江戸時代の中期以降はそんな時代のように思われます。才能にあふれる人材は星の降るごとくあまたに存在しながらも、為政者が新しいことに挑戦する雰囲気になく、従来からの方針を着実に踏襲することが保身の第一でした。そのような時代は一度つまずくと復活することが難しいので無難な策に流れます。

前例無きに手を染めない

最初に前例はありません。前例がないから早い者勝ちです。2番目以降は前例がつきまといます。前例はメール発信者に返信の機能を使い、一々、メールアドレスを入力せずにメールを送る手続きに似ています。こうなると前例至上主義が跋扈して前例のないものは認めないという安易な流れを生み出します。なんとかのひとつ覚えを振りかざす権力者ほど手におえないものはないのではと感じ入ります。

許容のある時代

失敗や誤りは誰にもあります。失敗を恐れいつも石橋を渡るような振舞いは事によりけりです。生命に危険が及ぼすようなことには常にそうあるべきですが、ただ、臆病風に吹かれて先頭を切る気概を持たない者には人は付いていきません。意味のある次につながる失敗には適切な評価がなされて当然です。

大きなことを成し遂げるには家族や組織の許容や支援が必要です。発明王エジソンの成功率は非常に低かったのではないだろうか。たび重なる失敗にもめげずに繰り返しの挑戦で新しいことが成し遂げられるのです。

周りからの応援

最近、『泣き虫しょったんの奇跡』を観ましたが、当事者だったらこの上なく切ないことと感じました。

周りから天才と言われて全国から集まった俊英が10年15年と競い合ってプロの将棋指し(棋士)になる世界《奨励会》を描いた実話を基にした映画です。

全国将棋大会で優勝した若者が奨励会に入会して年齢制限までに勝ち抜けずに奨励会退会を余儀なくされた例はたくさんあります。

人口3~4万人の市の中学チャンピオンで優勝してプロになれると小躍りする親がかつては多くいましたが情報が容易に伝達する今日、そのような親は少ないでしょう。

奨励会の入会試験に合格するだけでもおおむね県代表の力が必要とされています。

今回の映画は卓越した才能があったにもかかわらず、その才能が開花しなかった将棋を毛嫌いせずに愛し続けた結果が、周りの応援で敗者からの復活を遂げる物語です。

喧嘩わかれでなくても、失恋した相手、挫折して退会したスポーツチームなどの話はしたくないものです。

ことさら悪い点、理不尽な点などを探してそこから目を背けるものです。そこには主人公の人の良さと最後まであきらめない強靭な精神力が映し出されています。

規則を捻じ曲げる

法治国家ならば、一度決めた規則を全体の総意を受けずに勝手に解釈することは許されません。ただ、明治時代に決めた法律を時代に合わないにも関わらず、順法精神ただ一筋に貫いている例も多くあるのです。

プロの棋士になるには奨励会を経なければならない鉄の規律を破ることはできないでしょう。一方、将棋と言えば囲碁の世界に較べて垢ぬけていません。

将棋を描いたイラストにはステテコや腹巻姿のおじさんが載っており、女性が好んでするゲームではありませんでした。

当時、将棋愛好者はじり貧傾向にあり、何とかしなければならないという思いを抱えている指導者が多くいました。

一度、才能なしと烙印を押され奨励会を去ったアマチェアがプロとの対局で勝率5割を超える成績を作った現実を知らんぷりできなかったことも事実です。

繰り返しになりますが、将棋修行の環境としては共同トイレの4畳半下宿が思い起こされ、上記のような華やいだ雰囲気には程遠い状況でした。

総会で奨励会以外にもプロになる手段が可決され30歳を超えてもプロになる道が開かれました。相撲には幕下付け出しという似たような制度があります。

相撲協会と将棋連盟はかつての現役が経営者となっている数少ない団体です。

将棋連盟は社団法人、日本相撲協会は財団法人ながら両方とも公益法人です。

最近、スポーツ団体であったように終身会長と銘打つ実力あるいはワンマン会長の鶴の一声で規則を捻じ曲げるわけにはいかず、総会に諮ったものと思われます。

これらの動きがマスコミに取り上げられ話題騒然、人気沸騰を迎え、当時の連盟会長はこのような状況はすでに私(日本将棋連盟)の勝ちであり、プロ編入試験の結果に関わらず大成功と闊歩したものでした。

翌年、正式にプロ編入が規約として明文化されたようです。

過ちては則ち改むるに憚ること勿れ

自分や組織が誤っていると悟ったなら、躊躇なく改めなさいという教訓です。世間体や体面、人のおもわくを考えて、なかなか実行に移せないのが現実です。また、そこに利害関係が絡むと権力闘争になります。

相撲は八百長問題で屋台骨を揺るがす時期がありましたが、外国人力士が現役トップを占めることを許容する団体です。

部屋の弟子を抱えたままの協会会長が存在し、総理大臣になっても地方の知事を兼務している雰囲気がしますが、将棋同様、根強い人気に支えられています。

組織運営のプロを頂点に仰ぐ囲碁や柔道の団体に較べて、日本将棋連盟はそこそこ頑張っているのではないだろうか。

さいごに

かつて、将棋や相撲において若く早くして社会に出る人々が多かったですが、国技館を無借金で建て替えるなど大胆な施策を断行したり、女優や将棋界の大旦那や電機会社からの寄付金を基に自前の将棋会館を作っています。

掛け声だけでなく有識者を標榜するすべての団体・組織にも敗者が復活できる方策が望まれます。

 

セールスプロモーション

新しい形の販売促進策

先日、4つの標語を円形スクロールにして表示を試みた生活心得を発表しました。

カクカクした描画はぎこちなくイライラ感が募りかなりのストレスものでした。

前回は円形スクロールのアルゴリズムにおいて、デジタル一辺倒でしたがアナログ的な発想を加えて滑らかな表現にしました。divタグのoverflow:hiddenが期待した動作をしてくれたので助かりました。

おおむね満足できる精度ですが、まだしっくりこない部分が残っています。モダーンブラウザのChrome, FireFox, Opera, IE11では滑らかな動きですが、Edgeでは回転が脈動します。お店のキャッチコピーに応用できそうです。

ネオンサインとの違い

昔のネオンサインはドットが粗く見やすさはイマイチでした。スクロールも縦横に限られました。インターネットにつながった機器の利用は応用範囲に限界がありません。

インターネットを利用することにより、表現が外部環境に即時的に対応することが可能になり、たとえば、現在時刻や緊急地震報道に切り替えられます。

動作例

さらなる発展へ

このたびの円形状スクロール表示フレーズは円上に並べ得る語数を超えています。回転する文字列は画像ではなくテキストです。巻き尺のような仕組みになっているので表示語数の制限を受けない優れものです。

中央部に時刻をデジタル表示していますが知恵を絞れば目をみはるアピールができるでしょう。また、インターネットにつながっているので、花見シーズンならば近郊の桜の名所をオンライン中継することもできます。



スーパーの冷麦やスイカ売り場では、日本3大瀑布(華厳の滝、那智の滝、袋田の滝)の涼しさをライブカメラ中継して売り上げの向上を目指すことも可能でしょう。上の図のようにライブカメラのサービスをしているサイトは多くあります。その中でライブカメラへのリンクフリーのサイトを選びます。

12時にはハトを飛び出させたり、5月5日ならば1055番目のお客さんに粗品の提供をするなど様々なサービスが考えられます。

時代に合ったセールスプロモーションを考えてみましょう。

 

多文化の時代が到来か

幸せとは如何に

生き方として多数派に属していれば、楽に過ごせると言われています。しかし、員数合わせあるいは集票マシンの1票扱いではつまらないと考えて安易に少数派になると苦労します。

義理ある人や上司などが薦める縁談を断って別の道を進む場合、それなりの覚悟がないと後悔することがあります。

しかしながらもっとも悔やむのは周りの声に従いながらも結果が思うようにならない時です。だから、自分の意思を貫けたときは結果の如何に関わらず、幸せと言えるのではないだろうか。

普通以外は少数派

今ではそれほどでもなくなったようですが、生き方でなく職業についても同様のことが言えます。

農村地帯や会社勤務の多い地区では、文筆業や演劇で暮らす者への偏見が少なからずあることでしょう。

少数派が市民権を得るには時間がかかります。知名度の高い製造業は理解度が高いですがユーチューバーや○○コンサルタントなどはともすれば胡散臭い目で見られます。

作家などは大企業から仕事をもらう下請けでもなく、工場設備らしきものもなく、毎日、家にいてどうして生計を立てているのだろうと不思議がられます。

訪ねてくる人もなく、家電業者の出入りもないとどこぞの国のスパイをしているのではないかと勘繰られます。

少数派が評価される時代

少数派が評価されにくいのは、その他大勢からの脱却を夢見ても実行できずにうつうつとした体験を持っている人が多いからでしょうか。少数派を特別扱いすることによって多数派の心の安定が図られたことでしょう。

かつて両親の出身国が異なる子女は混血児、あいのこなどとちょっと異なる響きで呼ばれました。近年はハーフやダブルなどと呼ばれ、市民権が確立されてつつあります。

社会が複雑になり、多数派が両者の違いを浮き彫りにしても心の安寧につながらなくなっています。

多文化の時代は本物か

日本は単一民族国家かというとそうではありませんが、極めてそれに近い状況です。厳密には世界中で単一民族国家はどこにも存在せず、同一民族の割合が全人口の95%以上を占める国家も20には届かないでしょう。

近ごろ、サッカー、相撲、テニス、陸上競技などのスポーツにおいて、両親の出身国が異なる選手の活躍が目覚ましいものがあります。カタカナ名前や肌の色は関係ありません。

第二次世界大戦後、日本人は敗戦国側であったこともあり、非白人であることから人種差別される側に立っていました。経済発展や文化面の功績から日本人への人種差別は薄らいだように感じます。だから、肌の色で人種差別する人が少ないのではないだろうか。

最後の世間話

尾ひれが過大についた話です。父親がハイチ出身、母親が日本人の日本語を話せないテニス選手や両親がともにオランダ人ながら日本語しか話せない元日本代表サッカー選手がいます。アジア大会4*100mリレー選手にはカタカナの選手も含まれていました。

nagoyagaidai.com より

サッカー選手の話ですが両親とはオランダ語、インターナショナルスクールでは英語、サッカー生活では日本語を使ったとされています。

稀にみるtrilingual(トライリンガル、トリリンガル)と言えましょう。一家全員が日本国籍を取得するケースは珍しいです。

多様多彩な多文化の時代が到来したのでしょうか。本物、本格化が定着することを願っています。

 

生活心得

小さな目標

日ごろの小さな目標を4題、円形スクロールで表示してみました。

生活心得

  1. ⛑学童に注意!⛐道路にはいつも☠危険が潜んでいる☪暗い夜☀早めに☉ライトの点灯を⚠
  2. 歩きスマホは大事故につながる☻損害賠償、数千万円⚡賠償破産に☠歩きスマホは危ない⚠
  3. 一日3食バランスのある食事☕気楽に毎日続けられる楽しみを持つ⛳明日は明日の風が吹く
  4. 才能の差は小さいが、努力の差は大きい。継続の差はもっと大きい!⛭♡継続は力なり⚠✨

 

スクロール領域からはみ出す部分の描画設定はoverflow属性にてhiddenを指定しますが、円形帯状に制御する代わりに縦横方向に駆使して代用します。

もっと滑らかなスクロールになるはずですが、西郷(せごどん)風に、初回はこの辺りでよかろうか。

動作例

Startボタンをクリックして開始です。

 円形スクロール ©TacM,2018 Ver0.03
🗾
🌏
生活🏫心得
日ごろの心構え、たしなみ、守るべきことがら、常に心掛けなければならないこと

 

円形状スクロール

スクロールのいろは

スクロールはmarqeeタグを用いて、一時代を築いたようですがこのタグはHTML5やCSS3において、非推奨になっていますのでなるべくならば、使わないに越したことはありません。

そこでjquery.marquee.jsの利用になります。このブログでもCSSで作る全ブラウザ対応marqueeなどにおいてMarqueeWithCSSの名で何べんも取り上げています。

画像やテキストを左右の横、上下の縦スクロールして効果的な表現を可能にしています。

縦横を駆使して円形状にスクロールできないかといろいろ挑戦しましたが無理があるようです。そこでDIVの中に定義したテキストをtransform:rotateを用いて回転して描画する方法を採用しました。

にわかな挑戦のため、スムースな円形スクロールではありません。

参照先は、CSSでロゴを回転させるサンプル | WWW WATCHです。こちらは縦スクロールバーのスクロールに応じてスムースに回転表示される優れものですが、新幹線のガイド案内のように隠れたメッセージをスクロールして表示する例ではありません。

当サンプルにおいても解析が進めば期待した動作が得られるのではないだろうか。

 

円形状スクロール動作例

ブラウザの再読み込みボタンをクリックし、再実行してください。

🏫
🚕
©TacM,2018 Ver0.02

 

 

時の移ろい

グレーゾーンと変わっていくもの

最近の話題は水増し統計から暴力指導、パワハラ騒動に変化したようです。昔、許されていたが今はダメという話があります。時代劇や発展途上国のドラマを見ているとこれらの背景が浮かび上がってきます。ドラマはある程度、歴史の知識がないとつまらないものです。

隣国ドラマで、国際競争に勝つにはどうしても有罪になって収監中の人物の力が必要になり、土地の有力者の鶴の一声で自由放免になるというシーンがありました。時代の差こそあれ、どこでも同じようなことが起きるものだと感じました。

情状酌量や忖度は有史以来からあったことでしょう。

町の名士が勲章褒章が近い時期に交通事故を起こしたときに、もみ消しや表ざたにならない示談が行われたとの噂はかつて耳にしたことでした。

新聞社やテレビ局も社内で似たような問題を抱えることがあり、それなりの要望により記事や放送にしないことはまま、あることでしょう。

都合の悪いことを捻じ曲げることは許されないでしょうが、黙っていることは法的には許される範囲です。これは個人の領域に限られ、コンプライアンスが求められる領域では説明責任が必要です。

今はダメの例

  1. 昔、長距離列車にゴミ箱は用意されておらず、食べ終わった弁当箱を座席の下に置いた。不潔だが許される範囲だった。
  2. 小学校などで皆勤賞ねらいで、病気でも一瞬なりとも学校に顔を見せて早退扱いにしてもらい即、帰宅する親子がいた。
  3. 駅の構内や車内がきれいになり、車内や駅のホームに座り込む地べたリアン(菜食主義者、ベジタリアンの親戚)が跋扈した。
  4. 列車内や人前で化粧する女性。野暮の極み。今は見かけない。
  5. 子供虐待、DVは罪。
  6. 動物虐待も罪。
  7. 自転車荷台への二人乗り。危険。
  8. 一人で2台の自転車を運転。それぞれ二人で自転車で出かけ一人がタクシーで帰ったときの自転車回収法。今、見かけない。
  9. 子供を肩車するのはめっきり少なくなった。
  10. 大昔、赤ちゃんをおんぶしてかなりの力仕事をする人もいた。
  11. 昔、日光に当たることがやたら奨励された。
  12. 女中、下女、下男などまたは変更前の呼称で呼ぶ(馬丁、丁稚⇒厩務員、店員など)。
  13. 江戸時代、妙齢行儀見習い者が雇用主(殿様)から手が付き、男児をなすと一族の出世の糸口になった。
  14. ことさらに不利益な呼称を使う。取り立て屋⇒集金人。
  15. 社会的に使わなくなったことば。情婦⇒恋人、愛人。
  16. 差別用語として定着したことば。小僧⇒見習い、研修生、従業員。
  17. うさぎ跳びをすることは昔、奨励。今はダメ。
  18. 河原や公園での無許可バーベキュー。昔、自己管理。
  19. 焚き火や野焼きをする。昔、自己管理。
  20. ♨秀逸なキャッチコピー♨
  21. 部分英語を多用、掃除婦、社内恋愛、連れ込み旅館⇒モップレディ、オフィスラブ、ラブホテル。今は死語か。
  22. セクハラ・パワハラ行為、体罰行為。
  23. 運動の最中に水を飲むことが昔ダメ。旧来からの校則で徒歩40分かかるのに登下校途中で水分補給が今でもダメな学校があるそうな。
  24. 無許可の写真画像の付随的な使用もダメ。団体写真にモザイクが入り過ぎ。
  25. 金属や食べ物へのアレルギー対策。昔、初診者の問診は特になかった。

変わらないと恥をかく

長い外国生活から戻った人や社会の変化を気にしない人に接すると新鮮な感じを受けることがあります。オバタリアン、チョメチョメ、バッチグーなどの言葉を聞くとうれしくなります。

ひたむきに生きていた時代では法律的に違反でも、制度が現状に追い付かないところでは大目にみてもらって違法と騒ぐ人は多くいませんでした。

時代が落ち着いてやがて余裕が生まれてきたのに放置したり、知らんぷりをして一人勝ちをすると足元をすくわれます。

権力者が3年周期に変わったりする組織では自浄作用が働いて大きな問題になることは少ないです。

居心地のよい椅子に長期にしがみついていると他が見えなくなるので、日々、発足時を思いだして自問することが大切のようです。

今はもう秋

初秋から仲秋へ

誰もいなくなった海

記録的な暑さが続いた夏も終わりつつあり、月日は巡ります。曜日の関係で夏休みが2日伸びました。これが吉と出るか凶と出るかは日ごろの行いにかかっています。

この夏、夏休みの自由研究にかなり言及しました。参考になれば幸いです。自由研究がフリーマーケットで売買されているとか、お金儲けのうまい人がいるものです。文学作品「○○」、読書感想文300円などと出回っているのだろうか。

秋を詠った作品から

やすらぎを感じるBGMとともに雅な雰囲気でゆく夏を惜しんでいます。

オーディオ再生ボタン▶をクリックしてスタートです。

音楽:『昼下がりのワルツ』、H/MIX GALLERY 音楽素材より
 ©TacM,2018
 Ver0.06
秋風あきかぜ
  たなびくくも
    より
もれいづるつき
  かげのさやけさ
    古今和歌集(巻四 秋上 四一三)
        左京大夫顕輔さきょうのだいぶあきすけ

動作コードについて

当ブログは古いブラウザでの動作には頓着せず、モダーンブラウザを使用することを前提にしております。ie11, edge, chrome, firefox, operaの利用を推奨します。互換性を重んじるあまり、新しいことへの挑戦を阻害するのはしのびないです。

今回、edgeで期待した動作にすることがかなわず、やむを得ず、ブラウザ判定関数を使ってedgeの時だけ特別なコードを追加し、モダーンブラウザで納得いく動作に漕ぎつけました(2018-09-07追記)。

 

 

写真を動画風にまとめる

スライドショーより高級に

夏休みには行楽地に出かけ、大いに見分を広めたことでしょう。将来、新地に踏み出すには大きな広い世界を知ることが大切です。

そして、たくさんの写真にイメージを残したことでしょう。

夏休みの終わりにそれらを動画風にまとめて、自由研究の資料になるよう『スライド動画』を作ってみました。

写真編集ツール

写真編集ツールは無料から有料まで様々なものが出回っています。デジタルカメラメーカーから『スライドショー』が提供されています。BGMを流してかなりのことができます。

このほか、Windows Vista用に開発され標準品として付属されたWindows Movie Maker2.6(以下はWMM26と略記)があります。Windows10では期待した動作にならない部分がありますが、古いパソコンにインストーラーMM26_JPN.msiがあったので今回、これを使ってみます。

このソフトはWindows10上で動作することは保障されていませんが、スライド動画を作成するぶんにはさしたる問題はありません。インストール方法や使い勝手は《Windows Movie Maker2.6》にまとめてあります。

インストールして起動

WMM26が運よくインストールできたら起動するとやがて次のような画面が得られます。

コレクションを選び右クリックし「新規コレクション」でMovie16フォルダを作ります。このフォルダにスライド動画の素材を一同に集めます。

次に画像の表示順序を勘案して、下のストリーボードにドラッグ&ドロップします。カレントリーダーを先頭に、クレジットタイトル画像を2番目に、エンドクレジットを末尾にし、他は適宜に移動します。

さらに、BGM音楽素材をストリーボードの表示「オーディオ/音楽」の欄に移動します。上の図で1番目と2番目の間の上がタイムラインの表示になっていることを確認して、作業タグからビデオ切り替え効果の表示を選択して画像と画像の間に切り替え効果を挿入します。

切り替え効果は60種ほどあり、画像の始まり、終わり、画像内容にマッチするのを選んで画像と画像の間にドラッグ&ドロップします。たとえば、映画は🎬(カチンコ)により始まるので、最初はロールを選んでいます。本をめくるような画像の前にはページカール(右上へ)などが合いそうです。

字幕(キャプション)の付け方

字幕を付けるには、ムービーの編集-タイトルまたはクレジットの作成を起動します。「タイトルはどこに追加しますか?」の問い合わせに、選択したクリップの前、本体、後を指定します。そのあとにタイトルのテキストを入力します。

タイトル表示にインパクトを付けるには、詳細オプションでタイトルアニメーションを設定したり、フォントと色を変更することができます。

微調整など

テレビの縦横比は当初、4:3でしたが今では16:9が多いです。今回のスライド動画は16:9であり、デジタル写真で撮った画像が4:3であるので、両側に黒い縁が表れます。

動画再生時間は画像枚数に比例しますが、ツール-オプション-詳細と操作して、画像の再生時間と切り替え効果の再生時間を変更することにより調整することができます。

ただし、この設定は編集を始める前に初期化しておかなければなりません。優れた作品を作成するには、編集ツールの機能に精通して豊富な経験が必要です。

動画と音楽の再生時間を同時に終了させるには、音楽を伸縮すると違和感が出てしまうので、動画の数コマを伸縮させて調整します。

完成した作品

 

16枚の画像をもとに、先頭にはカウントリーダー次いでクレジットタイトル、末尾にはエンドクレジットを追加、主な画像には字幕(キャプション)をつけてスライド動画を作成しました。

中央または左下の再生ボタン▶をクリックすれば《スライド動画の作り方》が再生されます。昭和の映画には映写開始時に5~10秒間ほどカウントダウンするカウントリーダーが付いていました。レトロな雰囲気が味わえたら最高です。

終わりに

編集ツールが古く情報が少ないこともあり、WMM26を使いこなすのは骨です。予算があれば信頼性の高いソフトウェアが望まれます。この編集ツールが出力する動画のファイル形式はWMVタイプであり、JavaScriptで扱うにはMP4タイプに変換する必要があります。

16枚の写真は建物や風景がほとんどです。テレビで取り上げる同級生の写真では本人以外にモザイクが入るご時世です。変哲のない画像についてはご容赦ください。最後に難解な課題への挑戦に感謝いたします。

参考:動画ファイルの形式一覧(拡張子)

ファイル形式 拡張子
AVI  .avi
MOV .mov 
MPEG2-TS .m2ts  .ts 
MPEG2-PS .mpeg .mpg 
MPEG4 .mp4 .m4a 
WMV .wmv 
FLV .flv .f4v 
WebM .webm 
VOB .VOB 
MKV  .mkv
AVCHD .mts .m2ts 

 

電子チラシを作る

最後の夏休み自由研究

夏休みが終わって2学期が始まっているところもあります。夏休み期間は25日~45日と幅があるようです。

年々、暑さが高じてきているので冬休みを短く、夏休みを長くとろうとする傾向にあります。

2学期始業日は9月1日と固定していた記憶があります。ここ1~2ヶ月、自由研究、夏休み課題などについてさんざん触れてきました。最後に両親がスーパーを経営していることを想定し、感謝の印に電子チラシ(Webチラシ)を両親のために作ってあげる例を取り上げます。

自前のホームページ作成の前に

多くの企業は独自のホームページを持っています。チラシによる情報伝達には相当の時間を要するうえ、それなりの経費が掛かります。その点、ホームページにより素早い対応が可能になります。

うまく運用すれば、小なる経費で大なる効果を上げることができます。

 

販売促進のチラシを自在に作成できるようになったら、ホームページを持つような進展を考えてもよいでしょう。

作成する電子チラシの概要を決める

電子チラシの内容

  1. 店舗案内
    • 住所
    • 電話番号
    • 最寄り駅
    • 営業時間
    • 店休日
    • 案内図
  2. 店の営業方針
  3. 店の雰囲気
  4. 取り扱い商品例
  5. キャッチコピー

 

 

課題《電子チラシ》

夏休み自由研究 電子チラシを作る
 スーパー丸福大感謝セール ©TacM,2018 Ver0.02
 
ハートフル商店街【スーパー丸福】地産地消 とりたて野菜、鮮度抜群の近海魚、うまさ安さ一挙両得 
 

課題のHTMLコード

<html>
<body>
<div style="font-size:48px; color:darkviolet;"><span style="font-size:16px; color:black;">夏休み自由研究&nbsp;</span>電子チラシを作る</div>
<DIV id="fig0" style="position:relative; width:600px; height:230px; background:aliceblue; color:blue; font-weight:bold; overflow:hidden;">
<span style="font-size:30px; color:coral;">&emsp;スーパー<span style="color:green;">丸福</span>大感謝セール</span>&emsp;&copy;TacM,2018 Ver0.02
<DiV id="dmy1" style="position:absolute; top:60px; left:0px; width:600px; height:40px; background-image:url(http://aidesign.lolipop.jp/wp-content/uploads/2017/10/superMarufuku.png); opacity:0.2;"></DiV>
<Div id="msg1" style="position:absolute; top:60px; width:600px; height:40px; overflow:hidden; font-size:28px; color:darkred;"
 data-direction="left" data-duration="9500">
ハートフル商店街【スーパー丸福】地産地消 とりたて野菜、鮮度抜群の近海魚、うまさ安さ一挙両得 </Div>
<DiV id="dmy2" style="position:absolute; top:125px; left:0px; width:600px; height:84px; background-image:url(http://aidesign.lolipop.jp/wp-content/uploads/2017/10/super3.png); opacity:0.2;"></DiV>
<Div id="msg2" style="position:absolute; top:125px; left:0px; opacity:1.0; width:880px; height:84px; overflow:hidden; border:0px solid red;"
 data-direction="right" data-duration="12000"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/yasai-880x84.png"></Div>
</DIV>
<Div><img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/Marufuku.png"></Div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2016/09/jquery.marquee.min_.js"></script>
<script type="text/javascript" charset="Shift_JIS">
	jQuery(document).ready(function($){$('#msg1').marquee();$('#msg2').marquee();});	//marquee起動
</script>
</body>
</html>

さいごに

今回は、販売促進用のチラシを経営者たる両親に日頃の感謝を込めてプレゼントする例を取り上げました。

画像認識と組み合わせて、《本日100番目のお客様です。サービスカウンターまでお越しください。粗品と入店記念写真をお贈りします。》などとサービスするシステムを開発することもできるでしょう。

知恵を絞って売り上げに貢献する施策を考えてみませんか。

 

ダブル連番かぞえうた

かぞえうたの歴史

かぞえうたの歴史はかなり古くから存在しています。娯楽と仕事が一体となったものやリズム感よろしく老若男女の間で歌われています。わらべ歌から童謡、春歌まで幅広く庶民生活になじんでいます。

かぞえうたにも種類があり、1から順に繰り上がっていくものが多いようです。日本のことばには七転び八起きのように数詞を折り込んで表現し、ことば遊びの原形と言えるのではないでしょうか。

matome.naver.jpより
夏休みの課題として

ことば遊びのひとつとして、すでに輪環の順に四字熟語(輪環の順仕様四字熟語数え歌仕様四字熟語)を取り上げました。

今回は夏休みの課題例になるよう全プログラムコードを公開し、左スクロールに対応すべく縦書きを止めるなど小変更を加えました。

スクロールの特長

今回は、jQueryというJavaScriptのライブラリを用いてスクロール表現を取り上げます。jQueryには使いやす機能が豊富に詰まっています。

新幹線や山手線などにおいて限定された広さの車内掲示板で多くのメッセージを表示するとき、スクロール表示されます。また、表現に動きを付けて見るものの目を惹きつけます。

主な改訂項目

  1. 音声の自動開始が無効になったのでaudio要素の再生ボタンのクリックをすべての動作の開始にする
  2. かぞえうたが流れる時間を10分割して一番から十番に対応づける
  3. 画像のヘッダータイトルをテキスト表示する
  4. 難解な四字熟語に意味を追加

動作例

 ダブル連番かぞえ歌 ©TacM,2018 Ver0.04
再生をクリック

動作コード

<html>
<head>
<style type="text/css">
.markey {
  width: 600px;
  height: 450px;
  background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2018/08/SkyAutumn.png");
  overflow: hidden;
  border: 1px solid violet;
}
</style>
</head>
<body>
<DIV style="width:100%; height:590px; border:0px solid red;">
<span style="font-size:28px; color:mediumblue;">&emsp;ダブル連番かぞえ歌&emsp;</span>&copy;TacM,2018 Ver0.04<BR>
<Div style="width:600px; min-height:95px; border:0px solid blue; font-size:36px;">
<div id="top" style="float:left; width:298px; color:deeppink; border:0px solid pink;">再生<span style='color:black'>&#x25B6;</span>をクリック</div>
<audio id="bgm" style="float:left; min-height:55px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/kazoeuta.mp3" controls controlsList="nodownload">他のブラウザをどうぞ。</audio>
</Div>
<Div style="position:relative; width:600; height:450; border:0px solid pink;">
<div class="markey" data-direction='left' data-duration='14000' width="600" height="450" style="position:absolute; top:0; left:0;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/wordplay12.png" width="6000" height="450"></div>
</Div>
</DIV>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.js"></script>
<script type="text/javascript" charset="Shift_JIS">
          //①    ②    ③    ④    ⑤    ⑥    ⑦    ⑧    ⑨    ⑩    ⑪    ⑫    ⑬    ⑭    ⑮    ⑯
const suji="\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E\u277F\u24EB\u24EC\u24ED\u24EE\u24EF\u24F0";
const head=["一石二鳥", "二人三脚", "三寒四温", "四分五裂", "五臓六腑", "六順七徳", "七転八倒", "八葉九尊", "九分十分", "十年一日", "再生<span style='color:black'>&#x25B6;</span>をクリック"];
var count=-1;
document.getElementById("bgm").addEventListener('play', function(){	//プレイイベント
 if(count < 0){											//初期化処理は1回こっきり
  count=0;
  jQuery(function () {									//marquee処理
	jQuery('.markey')
			.bind('beforeStarting', function(){			//開始前に動作する処理
			timer1sec();								//待機関数起動
		})
		.bind('finished', function(){					//マーキーの終了処理
			jQuery('.markey').marquee('destroy');		//jQuery('.markey').marquee('toggle');
			count=-1;
		})
		.marquee()
  });
 }
});
function timer1sec(){									//待機関数 //console.log("count", count, count*14.3, count, suji[count]+head[count]);
	document.getElementById("top").innerHTML = (count==10) ? head[count] : suji[count]+head[count];
	if(++count <= 10)setTimeout('timer1sec()', 14300);	//待機関数再起動, 2'35"  155" 15500ms
}
</script>
</body>
</html>

 

終わりに

ダブル連番四字熟語は六と八が難解でした。六泊七日や八割九分は苦し紛れと言われそうで取り上げるに至りません。

音楽や動画を表示する場合、描画の準備完了や再生完了時にイベントが発生し、その処理を定義する例を示しました。参考になれば幸いです。

追記

2018/09/01:chrome, edge, firefox, operaのほかie11で動作するように小変更。