rNote-re を HTML5 に対応させた 2020-03-08 (日) 22:56:46+09:00

開発

というわけで、余暇を利用して対応させた。

各記事は article タグ、左側と上部のナビゲーション部分は、それぞれ nav タグでマークアップした。(あとやるとしたら、 section タグでセクション分けするぐらいか?)

また、各タグで HTML5 になって廃止された属性を同等のものに置き換える、リンク内の&を&に置換、リンク内の ASCII でない文字列を urlencode() でエンコード、など作業した。

HTMLLINT で95点(よくできました)がとれたので、これでまあよしとする。

SEO 対策には有効かも知れないらしいが、はてさて、どの程度有効なのだろう?

更に修正して、 HTMLLINT で100点がとれるようにした。

100点の現在も、 severity 0 (減点対象にならない)で、サイト内検索の検索対象を選ぶプルダウンのための select タグに「 tabindex 属性を付けろ」と言われるが、フォーカスする項目が動的に変わるブログで、いちいち全てのフォーカス対象の項目にタブを順番付して設定するのは、あまりに大変な割にそれをする価値もないので、放置する。

この記事のリンク元 | 9 | 8 |

この記事のリンク用URL&トラックバックURL : https://red-souls.jp/ichounoki/rnote/dev/20200308_225646440471.htm

キーワード: rNote-re HTML5


rNote-re の HTML5 対応について 2019-12-28 (土) 23:31:45+09:00

開発

とりあえず xhtml の HTML5 として既に表示していて、ヘッダ部分で canvas タグでアニメーションなどもやってみている。

で、あとは、 header, footer, section, article などの、パーツの意味を表すタグを使用するかどうかなのだが、ここで、はたと困ってしまった。

「これ、追加する意味あるのか?」・・・と。

というのも、そんなタグあってもなくても、ブラウザの表示上は何の変化も効果も働きもないからだ。

例えば、 article タグ。当サイトのようなブログであれば、1つ1つの記事を囲むのに使う「ことができる」が、使わなくても別に何も変わりはない。また、 article タグを入れ子で使い、記事のコメントを article タグで囲む「こともできる」が、そうしなくても、別に何の問題もない。

一事が万事、こういう状況なのだ。ブラウザの表示上は、特に何の効果ももっていない。

表示上は意味がなくても、例えば、 article タグで囲まれた部分は、 RSS のフィードに個別の記事として使える・・・のかも知れないが、現状、 RSS フィードの生成時に article タグで囲まれた部分を抜き出して1記事として生成するようなロジックは使用していない。そんなことしなくても、普通に RSS フィードを生成している。

HTML の読み手が HTML5 のソースを読んだとき、どの部分がヘッダで、どの部分が記事なのかが分かりやすくなるように・・・という考えもあるかも知れない。だが、ブログの運営上、 HTML5 のソースを読む必要などない。記事の書き手は、オン書きツールやオフ書きのできる xmlrpc クライアントなどで記事を書くが、その際、 HTML5 のソースを意識したり、読んであれこれ考慮したり・・・といったことは一切する必要がないのだ。

すると、 HTML5 の section, article, header, footer などは、一体どこで、誰の役に立つ場面があるのか・・・しばらくそれを考えていたのだが、「特に何の役にも立つ場面も相手もない」というのが現状の結論である。

はてさて、これらの新規追加されたタグの意味、追加する価値は一体何だろうか!?

section, article, header, footer について、いろいろ聞いてみた。

やはりブラウザは表示上何もしないようだが、サーチエンジンは読み込んで使用している可能性があるようだ。後は、読みやすさのため推奨、ということらしい。

例えば、記事の表示のされ方を指定するために <div class="item"> としていたのを、 <article class="item"> としてみるくらいの意味はあるかも・・・。

この記事のリンク元 | 9 | 8 |

この記事のリンク用URL&トラックバックURL : https://red-souls.jp/ichounoki/rnote/dev/20191228_233145888630.htm


JpGraph を試してみた 2019-12-26 (木) 21:04:43+09:00

開発

当サイトは、 rNote を使用しているので、 php で構築されている。

以前から、 php を使って動的に内容が更新できるグラフ描画に興味があったので、いろいろ検索してみたところ、 jpgraph というライブラリを見つけた。

jpgraph の動的描画サンプル

こんな風に、グラフを描画することができる。(produced by JpGraph

10年以上前に開発されたライブラリだが、現在も開発が続けられているようで、 php7 にも対応している。基本的に有料の商品だが、個人で非営利利用であればコミュニティ版を無償で使用できるようだ。

この記事のリンク元 | 9 | 8 |

この記事のリンク用URL&トラックバックURL : https://red-souls.jp/ichounoki/rnote/dev/20191226_210443026181.htm

キーワード: JpGraph php グラフ描画


管理画面に組み込むことができる 'A JACK IN THE BOX' の坂上ひさとさん作の「トラックバックプラグイン」( tb_tool.php )を php7 で動作できるよう修正した。


        if($_POST[mode] == "pre_tb"){\n
            $tb_line = str_replace("\r\n","\n",$_POST[tburl]);\n
            $tb_line = str_replace("\r","\n",$_POST[tburl]);\n
            $tb_line = str_replace("\n","<>",$_POST[tburl]);\n

上のようなコードが書かれているところが3箇所あるので、全て、


        if ((isset($_POST['mode']) ? $_POST['mode'] : '') == "pre_tb"){\n
            $tb_line = str_replace("\r\n","\n", $_POST['tburl']);\n
            $tb_line = str_replace("\r","\n", $tb_line);\n
            $tb_line = str_replace("\n","<>", $tb_line);\n

のように修正した。コードが意図する動作は、 "\r\n" を "\n" に置換、さらに "\r" を "\n" に置換、最後に置換されて残った "\n" を "<>" に置換というもののはずだが、元のコードでは3回呼ばれる str_replace() で、毎回 $_POST['tburl'] から値を取得しているため、そのような動作にならない。

併せて、 $_POST[tburl] のように書かれているところを全て $_POST['tburl'] のようにシングルクオートで囲むようにした。こうしないと警告が出るためだ。

次に、 tb_tool.php から読み込まれ使用されている jcode.php も修正が必要だった。古い php コードなので、 php7 では削除された ereg 系の正規表現関数が使用されているところが3箇所ほどあるので、全て preg_match(), preg_replace() に置き換えた。

以上で問題なく動作するようになった。

この記事のリンク元 | 9 | 8 |

この記事のリンク用URL&トラックバックURL : https://red-souls.jp/ichounoki/rnote/dev/20190902_215709991118.htm


管理者画面の「動作設定」( config.php )の「携帯用ページをテスト」を「モバイルページをテスト」に変更し、「携帯」「スマートフォン」「しない」の3項目から選択するようにした。

rnote.php 本体を修正し、 $g_bCellphone に加え $g_bSmartphone を追加した。そして、スマートフォン検出のために「mobiledetect」の Mobile_Detect.php を追加し、スマートフォンを検出するようにした。

$HOME/entries/ の中に、 error_s.skin, html_body_s.skin を追加し、スマートフォンの場合にそれらのスキンを用いるようにした。

$HOME/style/ の中に、 style-sites_s.css を追加し、スマートフォンの場合にそのスタイルシートを読み込むようにした。

これらの作業をしてみて気づいた。 rNote はページのキャッシュを作成する機能をもっているが、これはPCからのアクセス用のキャッシュのみなので、携帯からのアクセス時には、キャッシュは無効となり動的に生成されるようだ。

このへんは改善の余地があるのではないか。昨今のアクセス状況を見ると、PCだけでなくスマートフォンからのアクセス率が増えているようなので、携帯用ページはまだしも、スマートフォン用のページはPC用同様にキャッシュを生成するべきと思う。

この記事のリンク元 | 10 | 8 |

この記事のリンク用URL&トラックバックURL : https://red-souls.jp/ichounoki/rnote/dev/20190901_180459109926.htm