11.QRコード
携帯ではどう見えるかをチェックしてみました。
そうすると、ホームにQRコードが表示されると、それを形態で読めばURLを手入力しなくても表示できるので便利かと思いました。
QRコードは、今時なので、インターネットで自由に取得できます。そうして得た画像をホームに表示するには、ユーザープロフィールの写真として登録するのが最善です。
ユーザープロフィールは、設定から行えます。
11.QRコード
携帯ではどう見えるかをチェックしてみました。
そうすると、ホームにQRコードが表示されると、それを形態で読めばURLを手入力しなくても表示できるので便利かと思いました。
QRコードは、今時なので、インターネットで自由に取得できます。そうして得た画像をホームに表示するには、ユーザープロフィールの写真として登録するのが最善です。
ユーザープロフィールは、設定から行えます。
10.これからのブログの更新について
GoogleのBloggerを扱ってみて、一応の形を実現できました。まる3日を要しました。
ここに至る私の作業は、作業記録に書いてきたとおりです。確かに誰にでも、初心者にでも投稿は可能ですが、思いつくままに扱えば、やがて収集が付かないほど無茶苦茶になる可能性があります。
やはり、作業記録に記した程度の前提を理解して進められるのが大事かと思います。
投稿は、前例ができていれば、実務的に進められます。事務局通信、防災だより、講演・研修の、今までのような作成をする方と、投稿の担当者は共通が理想ですが、別けてもいいと思います。
投降者には必要な知識でも、一般にはホームページやブログの作り方についてのあれこれは必要ないといえます。
素材を作る人は、従来通りに作成し、PDF状態で投稿作業者に渡すというだけです。
投降担当者は、PDGからアップする画像を作り、Google DriveにPDFをアップします。
そこまで行えば、画像にPDFをリンクするだけです。
あとは、PDF原稿から、キーワードをピックアップするだけです。
以上で、私の事前調査を終わります。
9.講演・研修のアップを経て
手持ちにある公園・研修の資料をもとに、4点アップしてみました。
これで、「事務局通信」「防災だより」「講演・研修」のサンプルのアップができました。
ここで、気が付いて手を加えた件をいくつか挙げてみます。
⑴ラベルの表示順位
文字コード順が標準になっていて、講演・研修が真っ先に表示される状態になります。
これを順位固定にするために、先頭に数字を付けることにしました。
⑵講演・研修では、アイコン的な画像サムネールを配置するだけで、PDFへのリンクをしていません。
事務局通信などのように、クリックするとPDFを表示するのは、対象の文書が2ぺージを超える複数ページの際には必須ですが、講演・研修では表だけか、表裏だけしかありませんので、PDFへのリンクはやめました。
そこで貼り付けておく画像の作り方に一考が必要です。第一に画面で文字が読めること(ある程度小さな文字でも読める解像度が必要)。第二に、ブラウザでCtrl+(コントロールキーを押しながらプラスキーを押す)ことで、画面の文字など表示を拡大できますが、それをある程度の大きさにした場合でも、文字がギザギザにならないようにすることです。
そこで、貼り付ける画像を作る際に、300dpiのままで、横幅を1200dot程度にすることです。
大きな画像のままでは、確かにきれいですが、超過スペックで無駄ですので、どこまで最小限で許容できるかという工夫です。
ちなみに、画像はモノクロとカラーがあります。モノクロなら、スキャンしたままであればRGBカラーの状態ですので、グレースケールにモード変更します。それだけで画像容量が大幅に小さくなります。
⑶講演・研修の記事のタイトルと文章ですが、最低限に必要な情報だけにとどめたことです。
日付と催しの演題をタイトルにし、文章では時間と講演者だけにとどめました。
曜日、要旨は、直下の本文の画像に譲りました。
⑷年の扱いについて
年号の表記にはさまざまな見方があるのは事実です。
Bloggerが米国製であることから、和暦での表記は考慮されていません。そのために、ここでは、2022(R4)年12月29日のように、西暦の後に(R4)のような和暦をカッコつきで表示する方式を使いました。
2023(R5)01.14 東京の新しい直下地震の被害想定と震災への備え
14:00~16:00 cocobunji WEST5F リオンホール 講師:中林一樹氏
オンライン(zoom)でんも配信します。
防災だより(2000.4.1第104号)
下記の画像をクリックすることで、PDFファイルを表示できます。
キーワード:市民防災推進委員会総会,地域防災計画,防災 まちづくり,新町地区連合自治防災会,内藤・日吉地域連合防災会,役立つ防災 アプリ ・サイト,防災 教室 in 中学校
防災だより(2000.2.1第101号)
下記の画像をクリックすることで、PDFファイルを表示できます。
キーワード:国分寺市総合防災訓練,東日本大震 災での被災,コロナ禍の 避難,在宅避難者支援アプリ実証実験,防災講演会
防災だより(2000.1.1第100号)
下記の画像をクリックすることで、PDFファイルを表示できます。
キーワード:出初式,避難勧告,市民防災まちづくり学校,地区防災計画発表会,国分寺市民防災推進委員会総会
7.ファビコンの作成
ファビコンとは、ウェブ制作者以外になじみがない言葉かと思います。
独自のドメイン名を持つ事業体や組織は当然ですが、その組織のIDとなるロゴのようなものを持っています。そのページをウェブブラウザで表示したときに、タイトルの左に表示される小さなロゴ・マークのことです。
ページが置かれるサーバーの位置に、favicon.ico というファイルを置き、HTMLのヘッダにその旨を書いておくことで実現するものです。Bloggerでは、ユーザーに面倒なことをさせず、画像を指定するだけでそれを実現しています。
国分寺市民防災推進委員会では、事務局通信に表示されているロゴがあります。これを使いました。表示では小さすぎて判別がやや困難な気がしますが、他との区別は十分につくと思われます。なお、深い青色に着色してみました。
6.当サイトにおける検索の制限について
ここまで、作業を進めてきて、気づいたことがあります。
それは、このサイトの目的でもある、事務局通信、防災だより、講演・研修に関して、画像とPFDをリンクさせる形で作っても、サイト内検索で引っかからないということです。
検索の対象はあくまで文字列であるために、画像とPDFは対象になりません。
そのための回避策としては、事務局通信、防災だより、講演・研修をアップする際の、画像の前の文字列に、キーワードを書いておくことかとです。
例えば、事務局通信(2000.4.1第104号)とだけ、今までの例では表示していますが、2行目に、というか最終行のあとに、次のように書いておくようにすることです。
キイワード:野川源流スクール、ボランティア・ガイド、令和5年度防災予算、.....
このように書いておけば、検索時にこれらの文字列がヒットするようになります。
5.画像とPDFの問題は、簡単ではありません。
「国分寺一小」の画像は、このサイトのハードコピーを使いました。
フォトショップなどの写真加工ツールを使います。ハードコピーを、92dpiで幅600dot(pixcel)に縮小します。
ちなみに、PCや携帯のような画面の解像度は92dpi(位置1インチ=25.4mmあたりの画素数が92dotということです。プリンターできれいに印刷できる画素数は300dpiが望ましいところです。デジカメや携帯での写真は、300dpiであっても左右天地のサイズが巨大です。
それで、携帯やデジカメで撮った写真であっても、インターネットで使う場合は画素数を下げ、天地左右のサイズを画面で表示したいサイズまでトリミングして使うことです。
理由は、サイズを必要以上なまま使うと以上にファイルのサイズが大きくなり、表示の遅さとなり、アップのデータ量が大きくなり、さまざまな意味で無駄であるからです。
次に、事務局通信を画面に表示する場合は、元のファイルがPDFであるような場合、1ページ目をやはり、同じようにフォトショップで画像にして、先の国分寺一小の画面と同じように作成します。つまり、92dpiで幅600dotにします。
これを、ブログへの投稿時に、記事に画像貼り付けをします。
PDFを直接貼り付けることは、ウェブページの仕様に存在しないので、1ページ目を画像化してアップします。
問題は、閲覧者にPDFを見せたいわけですが、アップした画像にリンクし、クリックして表示するようにするには、通常の方式ではできません。つまり、PDFはアップもリンクも拒否されます。
これを実現するには、投稿者がユーザーとなっているGoogleのサービスである、Google Driveというクラウド上のエリアを利用します。すでに利用している方は、写真の保管場所にしている場合が多いかと思われますが、自分のGoogle DriveにPDFをアップする必要があります。
アップしたPDFファイルを「共有可能状態」にして、Google DriveのURLを受け取ります。
Bloggerに投降した事務局通信の画像に、ここで受け取ったURLをリンクとして指定します。
このような面倒な手続きをとることで、PDFのリンクが可能になります。もちろん、自分のGoogle DriveからリンクしたPDFを削除してはなりません。
4.トップ画面の形がほぼできました。
下の画像のようになります。これは、ラベルで「事務局通信」を選んだ時のものです。
トップのバーと、本文右のサイドバーでは、このサイトの自由文字列検索が表示されています。
その下にメインタイトル「国分寺市民防災推進委員会(BLOG準備)があり、その下に「作成記録」「事務局通信」のラベルがあります。「防災だより」と「講演・研修」は、明日以降にテストでアップします。
3.必須の項目だけを表示する画面を作るのは、そうとう面倒です。
必要な項目というのは、「事務局通信」「防災だより」「公演・研修」「作業記録」です。
作業記録は、私のメモのようなものです。このメモがないと、作業を振り返れないので、当面これを使います。必要項目というのは、ラベルになります。
画面上からヘッダ、そして本文があり、フッタが最下部で3つのブロックで構成されます。
本文、つまり2段目の右側に、三分の一程度の幅でサイドバーが表示されます。
なお、太字はBlogger特有の用語です。
2.国分寺一小のサイトを閲覧してみました。
国分寺一小のブログへようこそ (kokubunji1.blogspot.com)
事務局が紹介してくれたBloggerを使ったサイトです。実によくできています。
最上部の左に、このサイトの検索があります。
その下に、タイトル画面があり、背景に学校の写真が配置されています。そして、写真の下に「1年生」「2年生」…と、このブログで「ラベル」と呼ぶ分類が表示されています。
この下に、メインの記事内容が表示されます。記事内容の右に、このブログで「ページ」と呼ぶ「自己紹介」「はちまるくん」…を表示しています。
最下層は、まさにシンプル・テーマでそつなくフッダ表示をしています。
このシンプルな画面表示は、国分寺市民防災推進委員会サイトでも参考にしたいと思います。
1.Broggerはどんな仕組みになっているのかを知るために、少し動かしてみました。
事務局がテスト的に作ってみたというGoogleのアカウントで、編集用に入ってみようとしたのですが、これはすぐに諦めました。
当然と言えば当然なのですが、Bloggerは基本的にGoogleの個人ユーザーが使用するのを前提にしています。個人がBloggerを使って何かを公表するのが目的なので、Loginはユニークなgmailの個人メールアドレスをユーザー名として、さらにパスワードで確認するのですが、その個人が使用しているPCからアクセスする場合は問題がないのですが、それ以外のPCからのアクセスとなると、本人確認が求められる使用になっています。
したがって、私が先のサイトに入ろうとすると、別人と認定されて、毎回事務局のPCあるいは登録している携帯へ確認がいくようになっているためです。
そこで、私が自分のGoogleアカウントで、同じように作成してみるようにしたわけです。
名称は「国分寺市民防災推進委員会(BLOG準備)」としました。
サイトのURLは、bousaimatidukuri2.blogspot.com です。
ユーザー名は、mike.yahagi1@gmail.com です。
ちなみに、Bloggerの機能として、このままでは、管理者が私で、投稿者も私になりますが、私管理者が、他に管理者と投稿者を決めることができます。指定した方が紹介を受け受諾すれば、管理者にも投稿者にもなれます。この状態でのスタートとなれば、以後、そのサイトは複数の人からの投稿が可能になります。
ゆえに、私がこのサイトを調べてみて、ある程度の形にしてみたら、それを事務局が開設したサイトで同じように設定して、運営するという方向がいいのではないかと思います。
事務局通信第207号(2023.6.1)