FC2ブログ
私ども平和の絵本の、日々の活動日誌です。

2019年02月:「平和の絵本で-和を地球へ」活動日誌

TOPへ-活動日誌(平和の絵本から)

私どもの平和と癒しの運動の、日々の活動日誌です。

今日はhtml5をメインに


今日は生と死の絵本集の中の「何があっても」の全12ページをhtml5で書き直してみた。

中央寄せが最初、出来なくて、しばらく勉強。中央寄せしたいところが左寄せになり、中央寄せしたくないところが中央寄せとなってしまう。

いいかげんにやっていたのだが、基本がわかっていない。
そこで、じっくりと勉強。

分かったことは、ブロックとインラインとインラインブロックの違い。
tableはブロック要素なので、text-align="center"が効かず、marginで中央寄せする必要がある。ややこしいのは、ディスプレイをインラインブロックなどにしていれば、text-align="center"でも中央寄せできること。
さらにややこしいのは、カーソルが上に来た場合に、そのテーブル全体の色を変えたい場合、ブロックと指定する必要があること。
まずインラインブロックと指定し、hoverの場合だけブロックと指定していても、この場合、改行は入らず、つまりブロック要素にはならない。あくまでもインラインブロックとしてtext-align="center"を効かせることが出来る。

12ページをhtml5に書き換えるのに、結局、丸一日かかってしまった。^^;;
  1. 2019/02/21(木) 17:58:30|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:2

トップページが合格!


平和の絵本のWEBは、基本、html4.01で作成しているが、トップページだけ、html5で書き換えてみた。
当然、cssも書き換える必要があり、ずいぶんとややこしい。

今まで使っていて、html5で使えなくなったタグは、つぎのようなもの。
vspace hspace width font header footer center text-align bgcolour

これらを全て書き換えたり、cssで置き換えたり。
トップページだけで2~3時間の作業だったが、嬉しいことが一つ。

Googleのライトハウスで、ついに4項目すべてで、緑(合格)を獲得! 以下の点数となった。
Performance 97点 Accessibility 94点 Best Practice 93点 SEO 100点

始めたときは、合格点は1項目だけだったので、各段の進歩! やればできる!^^

それにしても日本語版だけで2千ページを超えている。1ページにこれだけ時間が掛ったら、全部の書き直しはとても無理だなあ。どうしよう?

まあ、重要なところからかなあ。
  1. 2019/02/19(火) 14:34:05|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:1

今日もイイネ復活作業と文字化け


今日もイイネ復活作業と文字化け修正作業だ。 
まだまだ延々と続く。 ^^;;
  1. 2019/02/17(日) 17:07:26|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

"?"への文字化け


SJISからUTF8への移行に伴う、平和の絵本の日本語版WEBの文字化けが気になって確認したところ、予想をはるかに上回って、文字化けをしている。 ~ ― Ⅱ Ⅲ などは全滅のようだ。
イイネボタンの復活をしたページにも、多くの文字化けが残っている。

しばらくは、文字化けとの戦いだな。^^;;
  1. 2019/02/14(木) 17:47:53|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

イイネ復活作業と文字化け


昨日に続いて、フェイスブックのイイネの復活作業。作業中に、文字化けがあることを発見。

"Ⅱ"といった、数字。それから"~"という波線も、文字化けしている。
恐らく、SJISからUTF8へ文字コードを変更したときに、文字化けしたのだと思う。

日本語版の平和の絵本は、二千ページを超えているので、どうしてもこういうバグが出て来るなあ! イイネ復活作業と併せて、文字化けも出来るだけ、修正中。
  1. 2019/02/13(水) 18:07:16|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

日本語HPのフェイスブックのイイネ復活作業


これも備忘録まで。

それぞれの絵本のトップページなど、左サイドメニューがある全ページに、以下のheaderを付け加えている。

meta property="og:title" content=""/
meta property="og:description" content=""/
meta property="og:image" content=""/
meta property="og:url" content=""/
meta property="og:type" content="website"/
meta property="fb:app_id" content=""/

そしてデバッガ―を行う。
すると、

このURLはまだFacebookでシェアされていません 新しい情報を取得

と出て来るので、新しい情報を取得する。
すると、イメージがまだ、と言われるので、

もう一度スクレイピング

を数秒待ってクリックする。すると、フェイスブックの過去のイイネが復活する。

気を付ける必要があるのは、同じページを色々なURLでデバッグしてあげること。つまり、何もなし/と/index.htmlと、それぞれhttpsとhttpの6種類で、デバッグする。そうしないと、イイネをきちんとカウントしないように思う。


左サイドメニューがあるページは、日本語版だけでも200ページ以上あると思うので、これだけで何日かかかりそうだ。^^;;

その後;
ちょっと実験をしてみた。6種類のデバッガーはしなくても、イイネを数えてくれるようだ。ただ、どれがどれかよく分からないので、なるべく6種類やっておいた方が、安心かも。
→httpsで、何もなし、/ /indexhtmlの3種類でOKそうだ。




  1. 2019/02/12(火) 17:25:53|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

フェイスブックのイイネ復活! 


この手の作業は暗中模索。まさに手探り感が強い。以下、将来の備忘録まで今日の作業を書いておく。

まず英語版のイイネボタンがまともに表示されないことをなんとかしようと、作業を開始。
そこでトップページのhtmlの記述を見ると、ninjaという表示があることを発見。
忍者ボタンだ。とっくに忍者ボタンの使用は中止したつもりだったが、英語版では残っていたのだ!

そこで忍者ボタンを中止して、自分でフェイスブックのイイネボタンを作ろうと、フェイスブックの説明を読もうとしたが、どこに書いてあるやら、検索しても見つからない。そこで過去の作業記録を探る。

ようやく活動日誌を見つけた。SNSボタン対応作業中というもの。2年半前以上前の記録だ。その中の記述にテスト頁を発見
そこで日本語版のトップページのテストをすると、

redirectがループになっているので、無効にしたとのエラー表示。

そこで、トップページのメタタグをいじってみた。<meta property="og:url" content="http://www.j15.org/"/> (ちなみにブログ表示のために、<>は全角にしています)。この中のhttpをhtppsに書き換えてみたのだ。
これでテストを再度したところ、イイネボタン動くようになった。つまり合格。
ところが、イイネの数は0のまま。

そこでSSL化で イイネが消える問題点が浮き上がり、ネットで対処方法を検索。これは多くの人が悩まされたことだと思う。
そして次の頁を発見。

→常時SSL化後に消えてしまったFacebookの「いいね!」数を元に戻す方法

これに基づいて、先ほど書き換えた、httpsをhttpに再度戻して、<meta property="og:url" content="http://www.j15.org/"/>とし、htaccessに、RewriteCond %{HTTP_USER_AGENT} !(Facebot|facebookexternalhit/1.1) [NC]の一業を書き加えた。

これが意味することは、FBのクローラーだけは、リダイレクトしないで、httpのサイトを参照しないさい。それ以外は、htppsへ行きなさいというものだ。

これでテストをすると合格。さらに消えていたイイネ562個が復活! Googleのライトハウスのチェックも問題なし!

さてさてもちろん、これで終わったわけではない。英語版への対応もあるし、日本語版のトップページ以外の イイネ はまだ死んだままだ。やりかたはだいたい分かってきたので、なんとか出来ると思うが。

新作絵本を描きたいとか、色々やりたいことはあるけれど、ま、のんびりやろう。

こういうこと、企業とかだとネットの専門家がやるんだろうなあ。ややこしすぎ!^^;;



  1. 2019/02/12(火) 15:08:59|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

SSL化でフェイスブックのイイネが0へ 


今、気が付いたが、SSL化をしたところ、フェイスブックの頁へのイイネがリセットされてしまったようで、0になっている。
日本語版も英語版もフェイスブックのイイネボタンは、トラブル中か。

難しいね~^^;;
  1. 2019/02/11(月) 17:46:58|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

英語版のSSL化


英語版の平和の絵本のSSL化を行なった。
常時SSL化でhtaccessをいじったところ、左メニューが表示されなくなって、焦ってしまった。
phpのバージョンの問題。古いバージョンを新しく変え、htaccessの指定も変えて、復活。

さてSSL化で、ライトハウスの数字は以下の通り、改善。

Performance 85→99
Accessibility 65→77 
Best Practice 57→64
SEO 100→100

Accessibilityは、色の指定を変えることで、もう少し改善できると思う。


それから、英語版のフェイスブックのボタンがおかしくなっていることを発見。
当該頁へのイイネがうまく出ない。何が原因か分からないので、FBで初めから、作り直すかなあ。

FBのボタンの作成の仕方は、まったく覚えていないので、数日かかるかも知れない。^^;;

  1. 2019/02/11(月) 17:37:32|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

SSL化 ライトハウスでチェック


これも知らなかったが、Googleクロームの拡張アプリで、ライトハウスというものがあり、WEBのチェックが出来る。
チェックできる項目は4つ。
Performance, Accessibility, Best Practice, SEOだ。SEOだけは緑の100点だったが、あとの三つは、オレンジ。つまり要改善ということ。

そこでまず一番簡単そうで重要そうなSSL化を試みる。販売サイトでもないので、どうでもよいと思っていたのだが、どのサイトでも重要だとライトハウスのレポートで強調されている。
そこで、しばらくその作業。

SSL化することで、WEBを見ることがより安全になるらしい。httpではなく、httpsとなる。 現在、平和の絵本では、Xサーバーを使っているのだが、しっかりマニュアルもありSSL化は難しくなく、思ったよりも簡単に作業終了。

日本語版平和の絵本は、今日からSSL化だ。(^^)/

さて、これでライトハウスのチェックを日本語版トップページに関してやり直してみると、緑が二つに増加。オレンジが二つ。
以下の点数。

Performance 92点 Accessibility 88点 Best Practice 71点 SEO 100点

しばらく放っておいた割には、まあまあの点数。これなら、全部緑色もそんなに難しくなく出来そうだ。(笑)




  1. 2019/02/10(日) 16:59:35|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:2

英語版「一輪の花」 修正


英語版の「一輪の花」 Just a flowerの修正をした。

以前、日本語版「一輪の花」で、絵の描きなおしをしたのだが、その部分の反映。それからモバイルフレンドリーに変更。久しぶりにhtmlとかをいじったので、忘れていることが多く、なかなか調子が出ずに何日も掛ってしまった。^^;;

ま、焦らずに、出来ることを一歩一歩。 これは長~~~い挑戦だから。(^_-)-☆
  1. 2019/02/10(日) 15:00:14|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

トップページのスリム化


Googleのページスピードチェックに平和の絵本のトップページをかけてみると、どうも大きくなり過ぎたようだ。

先日、お知らせの一部を他頁を作って動かしたのだが。
それでもまだ、次のようになっている。


合計 DOM ノード数 1,441
DOM の最大深さ <br> 14
子要素の上限数 <td id="sectionLinks"> 120


DOM ノード数 1,441は、1500個以下が望ましいとのことで、先日のお知らせの移動で1500未満としたが、それでもまだ注意マークがつく。

子要素の120は、左端の目次のこと。絵本が増えるにつれて、目次も大きくなってしまった。
民主主義シリーズとか、別ページに別の目次頁を作ることで、トップページの情報量を減らすことが可能。

少しずつ下におろしていく、ということを考えようと思う。
一度には出来ないので、ゆっくりと。


  1. 2019/02/09(土) 13:30:09|
  2. 懸案事項|
  3. トラックバック:0|
  4. コメント:0

ワードプレスへ移行?


すでに10年以上、FC2ブログを利用しているが、1か月記事を更新しないと、広告が出て来るのが煩わしい。
そこでワードプレスの利用はどうかなあ、と勉強中。

今なら、無料でワードプレスで、かなり自由度が効くブログを、煩わしい広告なしで作ることが出来る。使ったことは無かったのだけれど、それほど難しくもなさそう。現在契約中のサーバーで対応できるし。

問題は、データの移行をどうするか。まあ、資料ページといったところだけを移動するのでもOKかなという気もする。このFC2ブログはそのまま放置しておいても。移行しましたとだけ表示すれば。せっかくリンクもしているので、削除する意味はない。

平和の絵本で管理しているブログは3つ。ワードプレスで移行するかどうか。
どうするかな?
  1. 2019/02/06(水) 13:08:28|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0
















































当サイトと無関係の広告;[