Nature's Farmer
業務外
GW中の記事で、井戸掘りの心構えを投稿しました。
 |
2016年5月5日木曜日 |
| 土砂を浚っても浚っても崩れます、男の修行ですな |
「男の修行」は、山本五十六元帥の名言です。何事にも通じますな。
でも、ブログでは横書きで何だか、締まらない。縦書きに出来ないものかと色々試してみました。
Webのレイアウトはスタイルシート（CSS）とJavaスクリプト（JS）で操作できます。（できるらしい）
JSは以前、こちらの記事でも使ってみました。
水質基準項目をクリックすると、説明のダイアログボックスが表示されるものです。
 | 2015年9月24日木曜日井戸水の水質検査 |
CSSを本格的に扱うのは初めてです。
今回、ネットで検索して見つけた、縦書き化ツール「竹取JS」を試してみました。
普通のWebサイトなら、CSSとJSを組み込んで、HTMLの本文にスタイルを指定すれば良いのですが、ブログだと簡単にはいきません。CSSとJSは外部ファイル化して登録し、実行時に展開するのが普通ですが、私の使っているGoogleのブログサービス（Blogger）だと、外部ファイルを登録する方法がありません。なのでインターネット上のどこかに配置して、リンクすることにしました。
配置場所はGoogleのディスクサービス（Googleドライブ）にしました。井戸掘りアーカイブで図面配布にも使っているサービスです。
Googleドライブはホスティングサービスという、Webサーバ機能を提供しています。もちろん無料ね。
ホスティング用のURLと、ドキュメントIDを組み合わせて、取り合えずネットワーク上でリンクすることはできました。しかし、縦書きにならない。？？？
JSの中から別のJSを呼び出しているのですが、そこが動いていないみたいです。Googleドライブはアクセス時に共有用のURLを変換するため、上手くいっていないぽい。
それに最初は気が付きませんでしたが、上記のホスティングサービスのヘルプを読むと、冒頭に「この機能は、2016 年 8 月 31 日以降はご利用いただけなくなります。」なんて書いてあるわ。
2時間が無駄になりました。ぐぬぬ！！
CSSとJSファイルを別のところに配置しなければなりません。またネット検索すると、Webサイトサービス（Googleサイト）とやらを見つけました。グループ間で情報共有するサイトを作成するサービスです。
Googleサイトなら、一般ファイルをアップロードして、管理ができます。更にGoogleドメインの各種サービスへファイル共有することができます。これは簡単で良いですね。早速使ってみましょう。先ずはユーザ登録です。
と思ったら、いきなり、ログインに成功してしまいました。あれ、何だこりゃ？ 既にサイトがあります。
サイトの作成日付を見ると、2012年11月です。4年も前に、お試ししていたようです。すっかり忘れてました。（笑）
ブログ用にディレクトリを指定して、CSSファイルとJSファイルを簡単にアップロードできました。ファイル属性を共有に変更して完成です。簡単簡単。
次はBloggerにCSSファイルとJSファイルを組み込みます。
Bloggerには画面レイアウトにガジェットという部品を組み込む機能があります、JSを読み込むHTMLも見えない部品として組み込めます。
ガジェットにJSを読み込むHTMLを記述して、テンプレートデザイナーという機能で、本文下部にガジェットを配置して完了です。
次はCSSですが、こちらは画面部品のガジェットには組み込めません。CSSの登録はヘッダー部（<head>～</head>）に組み込まないとダメなんだと。
こちらは、Bloggerのテンプレートを直接修正しました。良く判らんが…。
ついでに、JSのガジェットがモバイルでも使えるように、パラメータを追記しました。これでいいのかしらん？
テスト用のページに「男の修行」を記述して、タグに「竹取JS」のID名を指定して完了です。
試してみましょう。
じゃーん、縦書きになりました。
男の修行 山本五十六 苦しいこともあるだろう 云い度いこともあるだろう 不満なこともあるだろう 腹の立つこともあるだろう 泣き度いこともあるだろう これらをじつと こらえてゆくのが 男の修行である |
でも、何だか変です。ブログのタイトルとかのスタイルが変わってしまいました。
「竹取JS」で追加したCSSがBlogger本来のスタイルを上書きしてしまっているようです。
それに、ブログの表示が遅いです。縦書きのテストページだけでなく、全体が遅くなりました。
ブラウザのステータスバーを見ると、Googleサイトにアクセスした時点でモタモタしています。CSSとJSファイルのダウンロードで、複数回リダイレクトしているようです。
これでは使えません。表示が遅いのは致命的です。元に戻しましょう。
また、2時間が無駄になりました。ぐぬぬ！！
せっかく、縦書きができたのに捨てるのは勿体ないです。
テストページだけなら、遅くなっても良いやってことで、テストページにCSSとJSファイルを直接組み込むことにしました。CSSはソースを直接、展開しました。
JSも直接、展開すれば良いのですが、サイズが大き過ぎるので、こちらはリンクで対応しました。
で、できあがったのがこのページです。かっちょ良い！！
でもやっぱり、遅いですね。
それに、難点がもう一つ。縦書きのフォントは「HGS行書体」を使っています。これはMicrosoftオフィスのフォントです。PCには大体導入されていますので、キチンと表示されますが、スマホだとダメですね。標準フォントで表示されるので、縦書きの魅力が半減です。
こちらもネット検索すると、「Webフォント」と言う技術があるらしい。次はこれに挑戦してみます。
感想と構想
今回、CSSとJSファイルの組み込み方法を試行して、勉強しました。
縦書き自体は「竹取JS」の機能をそのまま使っているので、難しくありません。他でも使ってみたいです。
普段やらないことを色々試してみましたが、BloggerのHTMLエディタはまだバグってますね。気が付いて、再現できたのは3点です。
- HTMLエディタで、フォントサイズにxx-largeを指定して作成ページに戻るとx-largeに化ける。
- sectionタグ内に改行を記述すると、タグの上に同じ数の改行が挿入される。
- scriptタグ内を正しくパースできない。
画面の文章は横組みですね。この後何か新しい情報はありますか。私も縦組みにしたくて悩んでいます。
返信削除