月別アーカイブ: 2018年9月

autoplayの小調査

自動再生を調査する

ブラウザの雄、グーグルクロムにおいて2018年、オーディオとビデオオブジェクトの自動再生の仕様が無効扱いに変更されたことは公知の事実です。音声を無音(ミュート)にしておけば従来通り再生されます。

思いがけない大音量で自動再生され不快な気分になることを避ける意味合いから変更になったものと推定されます。Chrome以外でも近い将来には同様の動きになるものと思われます。

調査した内容

  1. chrome以外に他のモダーンブラウザにおける動作を確認する。
  2. 自動再生が無効になったブラウザで従来通りの動作にする方法。

チェック方法

調査アプリの実行時に計測用時計を起動し、ブラウザ名を表示し、音声オブジェクトの再生開始イベントを取り付けます。そして、body要素のonload属性に音声を再生するコードを指定します。

再生開始イベント関数において、《再生開始》のメッセージと経過カウンターを表示します。

チェックに用いたJavaScriptコード

次のコードの5行目、audio要素にautoplayを指定しているので、以前はすべてのブラウザにおいて音声オブジェクトの準備が完了したときに、音声が流れていました。Chrome66以降ではautoplayの動作が細かな設定に基づいて動作します。

<!DOCTYPE html>
<html>
<body onLoad="start();">
<div>音楽:<span style="color:deepskyblue; font-size:32px;">『昼下がりのワルツ』</span>、H/MIX GALLERY 音楽素材より</div>
<audio id="bg" style="float:left" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/c3.mp3" controls autoplay controlsList="nodownload"></audio>
<div id="brows1" style="float:left; font-size:18px; color:darkgreen; border:0px navy solid; width:95px; height:28px;">ブラウザ名</div>
<div id="brows2" style="float:left; font-size:18px; color:darkgreen; border:0px navy solid; width:70px; height:28px;"></div>
<div id="brows3" style="float:left; font-size:18px; color:orangered; border:0px navy solid; width:120px; height:28px;"></div>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/11/DevelopingTools2.js" charset="UTF-8"></script>
<script type="text/javascript" charset="Shift_JIS">
var counter=0;
setInterval('timer()', 250);
document.getElementById("brows2").innerHTML=BrowsN[getBrowser()];	//ブラウザ名を設定
document.getElementById("bg").addEventListener('play', function(){	//プレイイベント
  document.getElementById("brows3").innerHTML="再生開始,"+counter;	//この関数は再生開始時に実行
});

function start(){
  document.getElementById("bg").play();
  console.log("Check autoplay!");
}
function timer(){													//実行開始からの経過をカウントする
	counter++;
}
</script>
</body>
</html>

当ブラウザのチェック結果

音楽:『昼下がりのワルツ』、H/MIX GALLERY 音楽素材より

ブラウザ名
 
 

 

上記動作コードは、閲覧者がブラウザの設定を変更した場合、動作確認のために用意されています。ブラウザ名XXXXの右に赤字で再生開始, XXが表示されないときはautoplayが無効になっていることを示しています。この場合、再生ボタンをクリックすれば赤字で表示されます。

主なブラウザの動作結果

  1. ローカル環境においてデフォルト状態のブラウザCHROMEにて動作
  2. ローカル環境においてブラウザCHROMEのAutoplay Policyのスイッチ、No user gesture requeredを選択して動作

 

モダーンブラウザの動作結果

ブラウザ名 動作環境 設定条件 自動再生結果
Chrome ローカル環境 デフォルト 無効
Chrome ローカル環境 ※1)Autoplay policyを設定 有効
Chrome 公開サーバー デフォルト 有効
edge 公開サーバー デフォルト 有効
IE11 公開サーバー デフォルト 有効
firefox 公開サーバー デフォルト 有効
opera 公開サーバー デフォルト 有効
Chrome 公開サーバー  デフォルト 無効
Chrome 公開サーバー ※2)Google chrome設定で許可する 有効

※1)Google chromeの場合、Chrome.exe画面のアドレスバーにchrome://flagsを入力して、エンターキーを押下します。その後、autoplayで検索し「Autoplay policy」欄の右端に現れた値をNo user gesture requeredに設定する。

※2)Google chrome‐設定(右上の縦…)‐詳細設定‐コンテンツの設定‐音声‐許可するサイトを入力する

さいごに

販売促進のキャッチコピーを流す場合、音声が流れることを十分にお知らせした上に、クリックやタップの操作をしないで自動再生したいことがあります。そんな場合のために、現況を調査したうえで再生の方法を確認しました。

細かな設定をいとわなければ、今までに動作していたアプリに手を加えずにかつての動作をよみがえらせることができます。

尚、これから開発するアプリはだしぬけを食わしたりすることなく快適さ、心地よさ、アメニティなどを第一義に考える時代になったようです。

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

変化のない時代

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

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

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

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

前例無きに手を染めない

最初に前例はありません。前例がないから早い者勝ちです。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追記)。