秋の七草
当ブログの近頃の記事で秋の七草を取り上げています。今回も下から上にスクロールする画像を載せています。そこで万葉集から秋の七草を参照します。
万葉集に山上憶良の「秋の七草にまつわる歌」を２首、掲載されています。最後の七草に朝顔を取り上げていますが、今では桔梗を挙げる場合が多いようです。また、薄（ススキ）は別名の尾花（オバナ）と表現されています。
栄枯盛衰
いつの世も栄枯盛衰は付いて回ります。未来永劫に一人勝ちはあり得ません。
勝ち続けると慢心が生まれます。放ておいてもトップ交代は起きます。この辺りを平家物語が突いています。
平清盛は武家政権を確立したことで、歴史的にはもっと評価されて然るべきなのに低いのは平家物語の冒頭の文言がその理由でしょうか。
画像や文字をスクロールする機能であるmarqueeの歴史は深く、利用度も高いのに鬼っ子的な扱いは気の毒です。
HTML5の正式な仕様からも排除され、低評価です。何か平清盛に似ているように感じられます。
テコ入れ
正式仕様から外されてもすぐに使えなくなるわけではありませんが、いずれ問題は起きそうです。＜markquee＞〇〇〇〇＜/marquee＞とするだけで左にスクロールする機能は重宝です。これに代替する先進的なテクニックはまだ見ていません。
そこでマーキー要素（marqueeタグ）を使わずに、全ブラウザ対応を目指してCSSだけでスクロール機能を実装してマーキーをテコ入れしました。前回の《秋の七草と赤とんぼ》で多用した＜marquee＞要素はひとつも使っていません。では実装方法に進みます。
JavaScriptライブラリのデファクトスタンダード管理機関からjQueryライブラリとgithubからダウンロードしたjquery.marquee.jsを利用しています。
実装方法
①ソフトウェア開発プロジェクトのためのソースコード管理サービスを司るgithubからプラグインソースコード一式jQuery.Marquee-master.zipをダウンロードします。
②jQuery.Marquee.jsをインクルードする前に、新しいjquery.min.jsをインクルードします。公開サーバーのアドレスにリンクします。
③jQuery.Marquee.jsを自分のフォルダに確保し、ソースコードを参照できるようにインクルード指定します。自分のローカルアドレス、または自分のリモートサーバーアドレスにリンクします。
④その後は、サンプルコードを収録しているサイトを参照し、例えばSee the Pen LGolj by Aamir Afridi (@aamirafridi) on CodePenあたりを参照して、動作確認済みのソース(HTML, CSS, JS)からひな形のソースコードを作ります。
⑤スクロールするコードが確認できれば、実装の玄関口にたどり着いたことになります。
タイニー版マーキーコードと実行例
タイニー版コード
上で示したgithubのサイトからHTML,CSS,JSを一つのファイルにまとめてあります。jquery.marquee.min.jsのファイルは適切な場所に格納し、正しいアドレスを設定します。
<html>
<head>
<title>Marquee with CSS プラグイン</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A.marquee%20%7B%0A%20%20height%3A%2022px%3B%0A%20%20width%3A%20300px%3B%0A%20%20overflow%3A%20hidden%3B%0A%20%20background%3A%20aliceblue%3B%0A%20%20color%3A%20green%3B%0A%20%20border%3A%201px%20solid%20navy%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;style&amp;gt;" title="&amp;lt;style&amp;gt;" />
<span style="font-size:20px; color:maroon">CSSで作る全ブラウザ対応marquee</span><BR>
Left:
<div class="marquee">jQuery marquee is the best marquee plugin in the world</div><BR>
</head>
<body>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.marquee.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" /> ?＝＝＝要、修正
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24('.marquee').marquee()%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />
</body>
</html>
実行例
Marquee with CSS プラグイン
CSSで作る全ブラウザ対応marquee
Left:
jQuery marquee is the best marquee plugin in the world
おわりに
下から上にスクロールする画像を載せる予定でしたが、都合により次回にしたいと思います。また、前回の「秋の七草と赤とんぼ」はChromeでしか、思ったような動作になりませんでした。今回の方式に焼き直してこそ、鬼っ子「marquee」へのアシスタントと言えるので宿題ということになります。
薬物を使って体を強化したり、イルカの生態を極限まで応用した水着などは禁止されました。バレーボールではアンダーハンドサーブが一般的でしたが、今ではオーバーハンドサーブやジャンプサーブが使われます。
凌駕するようになり、他人に隠れてコンピューターから助言を得ることが可能になりました。文明の利器を使わない方が不利になります。これからは試合場にスマホの持ち込みが禁止になりそうです。
ル改正が行われたり、人間と機械が一体になってなんでもありの対戦が行われるのでないかと推定されます。
斬新な手法で天下を取っても、それが著作権で保護されるように他が入り込めないようならば、優勢を長期に維持できますが、一般には牙城を崩されてボロボロになりかねません。
