カテゴリー「ウェブログ・ココログ関連」の8件の記事

2020年4月19日 (日)

横方向のはみ出し部分が切れることへの対応

当ブログでは数式を扱うことが多く有ります。それをスマートフォン(モバイル・モード)で見ると、次式のように数式が横方向へはみ出して切れる場合がほとんどです(PC モードだと切れない)。

\[ \mathscr{L} = -\frac{n_0e^2}{2mc^2}\boldsymbol{A}^2 + \frac{1}{8\pi}(\boldsymbol{E}^2 - \boldsymbol{B}^2) \tag{例} \]

今までは、スマートフォンで見ることが無かったので、それに気付かずにいました。しかし LongDriver のデバッグが切っ掛けで時々見るようになり、数式や図のはみ出しが気になって来ました。

そこで、はみ出した部分は横方向にスクロール出来るようにすることにしました。そのために、スタイルシートに (1) を定義して、

// (1)
.sl_math {
    overflow-x: auto;
}

記事中で横スクロールさせたい箇所を (2) のように挟みました。

<!-- (2) -->
<div class="sl_math">
    ・・・
</div>

ココログ(ベーシック)でスタイルシートの編集は、管理画面の「カスタム CSS を編集」で行います。

ところが、これらの作業を実施したにも関わらず、モバイル・モードで横スクロール出来るようにはなりませんでした。実は、ここで編集したのは PC モードのスタイルシートだったのです。では、モバイル・モードのスタイルシートを編集するのは、どうするか?・・・方法は有りません(たぶん)。結局、スタイルシートは使わずに記事中に直接 (3) を記入することにしました。

<!-- (3) -->
<div style="overflow-x: auto">
    ・・・
</div>

これで、スマートフォンでも数式などが切れることなく見れるようになりました。

\[ \mathscr{L} = -\frac{n_0e^2}{2mc^2}\boldsymbol{A}^2 + \frac{1}{8\pi}(\boldsymbol{E}^2 - \boldsymbol{B}^2) \tag{例} \]

それにしても、スタイルシートのカスタマイズが PC のみとはフザケタ仕様です。

2020年4月10日 (金)

HTTPS 化出来ました

HTTPS 化へ向けて にも有るように、画像に限定されず任意のファイルをココログに保存出来ることが分かり、当ブログの HTTPS 化の道が開けて来ました。本日、その作業を終えて HTTPS 化したのでザッと振り返ってみます。

HTTPS 化には次の作業を考えていました。一部、不必要な処置も有りました(取り消し部分)。

  • XyJax をココログに保存
  • MathJax, XyJax をロードするためのファイルを変更し、ココログに保存
  • MathJax, XyJax ロード用ファイルの読み込み先をココログ内ファイルに変更
  • FlatTable, LongDriver の表示用ファイルをココログに保存
  • FlatTable, LongDriver の表示に使用しているリンク先をココログ内ファイルに変更(この時点では http)
  • 上記リンクを https に変更
  • サイドバーの Link 変更, FlatTable, LongDriver へのリンクは削除
  • Google のサーチコンソールに当ブログを登録

MathJax, XyJax の変更

MathJax は HTTPS 化している CDN へ直接アクセスすれば良いのですが、 XyJax は今まで、専用サイトが分からず、レンタルサーバにファイルを置いて、そこへアクセスしていました。そのサイトは今だに HTTP のままです。そこで XyJax をココログに保存してそれを使うことにしました。

MathJax, XyJax の使用には、それをロードするスクリプト・ファイルを実行するようにしています。 XyJax のアクセス先を変更するため、ロード用スクリプト・ファイルを修正し、それをココログに保存しました。ついでに MathJax ロード用スクリプト・ファイルも MathJax のバージョンアップに対応して保存しなおしました。今までに投稿した記事は、ロード用スクリプト・ファイルへのリンクは古いアドレスが指定されているので、それを新しいスクリプト・ファイルのアドレスに変更しました。

FlatTable, LongDriver の変更

FlatTable, LongDriver の本来のサイトは HTTPS 化する見込みが無いので、これらのファイルをココログに保存し、そのファイルを利用して当ブログでの画像の表示に使用出来るようにしました。もし、これをせずに当ブログを HTTPS 化すれば、これら2つの画像は「混在コンテンツ」として非表示になります。

順序としては、記事中の FlatTable, LongDriver へのリンクアドレスを書き換えてからブログの HTTPS 化を実施しました。その時点では、リンクのプロトコルは HTTP のままです。そして HTTPS 化の後でリンクを HTTPS にするつもりでいたのですが、ブラウザが良きに計らってくれて、表示の時は HTTP → HTTPS になっていました・・・元の記事は HTTP のままなのに。そんな訳で、予定していたプロトコルの修正はしないことにします。

サイドバーおよびその他のリンクの変更

サイドバーには外部へのリンク集「Link」が有り、FlatTable, LongDriver などが記載されているのですが、それらの多くは HTTP でした。そのままだと「混在コンテンツ」になると思って HTTP でのリンクは削除しました。後で分かったのですが、ここが HTTP でも問題無いようです。今はFlatTable, LongDriver へのリンクは復活させました。

同様なことは記事中のリンクに対しても成り立つようです。記事中には <a> タグを用いて HTTP へのリンクが幾つも有るのですが、それでも問題は有りません。

ブログの HTTPS 化を一通り終わらせたところで、Google のサーチコンソールに当ブログを登録しました。これで作業は終了です。

アドレスバーには鍵マークが表示されています。

2020年4月 7日 (火)

HTTPS 化へ向けて

ココログは昨年 11 月に HTTPS に対応可能となったのですが、当ブログは今も HTTP のままです。それは、 FlatTable (ビリヤードの配置図ソフト)や LongDriver (フットボールのプレイブックソフト)を置いているレンタルサーバー LaCoocan が HTTPS に対応していないからです。当ブログを HTTPS にしても iframe などの参照先が未対応だと混在コンテンツとなり、それらが表示されなくなるそうです。それなら今のまま (HTTP) の方が良いでしょう。他のサーバーに切り替えるという方法も有りますが、上記ソフトの需要もほとんど無いので、わざわざ替えようというモチベーションも有りません。そして、上記ソフトの他にも XyJax を同じサーバーに置いてそれを利用しています。

そのような事情で、当ブログの HTTPS 化は諦めていたのですが、「出来そう」という見通しが立って来ました。

上記ソフトの件は、当ブログでの表示に関してはココログ内に保存して、それを使用しようと考えています。ココログへのファイルのアップロードは、昨年の改悪で自由には出来なくなったのですが、まったく出来ないという訳でもないようです。ブログ編集画面に「ファイル挿入」ボタン(タブ?)が有ります。これは、画像以外の何かをブログに表示するためのものと思っていたのですが、どうも使い方次第で記事とは無関係に任意のファイルを保存出来るようです。 @nifty はそれを意図していたのか疑問なので大きな声では言えませんが、任意ファイルの保存方法が下記記事に有ります。

この方法で LongDriver をココログ内に保存出来るか試したところ、可能でした。現在、当ブログに表示している LongDriver はココログ内にアクセスしたものです。ただし、プロトコルは HTTP のままです。将来、当ブログが HTTPS 化したら LongDriver へのプロトコルを HTTPS に変更します。なお、リンクの関係で LongDriver の help 画面は正常には表示されません。当ブログで LongDriver を使用するのは、プレイブックの表示が目的なので、たぶん help は要らないだろうから help 画面の乱れは無視することにします。なお、 FlatTable は未だこの対応はしていません。 LongDriver よりもファイル数が多いので、少し躊躇しています。

もう1つの問題 XyJax も解決の目処が立ちました。それらが解決したら HTTPS に変更したいと思います。

2019年12月17日 (火)

記事のタイトルのサニタイズ返し⇒例 <span class="sl_ft" style="font-weight:normal">FlatTable</span>

ココログは今年3月の改悪によって幾つかの機能を我々から奪いました。その1つに記事のタイトルに HTML タグを記述できなくなったというものが有ります。ビリヤードの配置図ソフト FlatTable は←のようなフォント(impact のイタリック体)で表記することにしています。それには HTML のタグが必要になります。これを記事のタイトルに入れることは、改悪前には可能でした。しかし、改悪後は、記事編集画面で HTML タグ入りのタイトルを入力しても、それがサニタイズされ、タグとしての機能が無効にされるようになりました。そのため、改悪以降に作成した記事では タイトル中の「FlatTable」 は 「FlatTable」 と表示されています。

しかし、 JavaScript を使うことで、この忌まわしいサニタイズに対してサニタイズ返しすることを思い付きました。本文中に下記コードを入れればOKです。

<script>
<!--
(function(){
    var subtitle = document.getElementsByClassName("entry-header");  // (1)
    if (subtitle.length == 0){  // (4)
        subtitle = document.getElementsByClassName("article-title");  // (1')
    }
    subtitle[subtitle.length-1].innerHTML = subtitle[subtitle.length-1].innerHTML.replace(/</g, "<").replace(/>/g, ">");  // (2)
})();
-->
</script>

記事タイトルにはクラス名として下記が与えられています。

  • entry-header :PC モード
  • article-header :ケータイモード

そこで (1), (1') のようにして、ページに表示されている記事タイトルの配列を獲得します。 (4) の判定条件は最初 (!subtitle) としたのですが、うまく行きませんでした。何故なら、 (3) で entry-header が無い時、 subtitle は空の配列になりますが、それは !subtitle == true を意味するものではないからです。

配列 subtitle の要素数はページの先頭から当該スクリプトの位置までのタイトル数です。つまり、当該スクリプトより後に配置されている記事の分は含まれません。すなわち、 subtitle[subtitle.length - 1] が修正したいタイトルになります(2)。

これで望み通りの表記で記事タイトルを表示することが出来るようになりました。(ただし、スマートフォンは impact がインストールされていないため、標準的なフォントで表示されます。)

それにしても、ココログは、何故タイトルをサニタイズするようになったのでしょうか? 本文中の HTML タグは有効(サニタイズされていない)なのでタイトルだけを警戒しても仕方ないと思うのですが・・・。

もう1つ愚痴を言わせてもらいます。上記スクリプトは必要に応じてコピペすることになります。その手間自体は大したことではありませんが、出来れば、スクリプトファイルを別途用意しておいて、それをロードするようにしたいところです。これもあの改悪によってファイルを用意することが出来なくなってしまいました。

2019年9月29日 (日)

MathJax がバージョンアップしたけれど、当ブログでは使えない

MathJax のページの NEWS ではアナウンスされていませんが、バージョン V3.0.0 が公開されています。下記に説明が有ります。

  • Getting Started
  • MathJax Documentation
  • この何日かは英語と格闘して使い方を調べていました(Google の翻訳頼みでしたが)。今までの V2.x.x の場合、バージョンアップの対応はバージョン番号を書き換える程度で良かったのですが、 V3 からは大きく変わったようです。 そのため、V3 を使用するには次の3点を解決する必要が有ります。

    1. ローディング方法
    2. 動的な使用方法
    3. XyJax 使用方法

    1. のローディング方法は上記 Getting Started にも有るのですが、今回は別ページの Configuring and Loading MathJax を参考にしました。

    2. の動的な使用方法に関しては MathJax のドキュメントで説明を見つけることが出来なかったので、 MathJax の Live Demo のソースを参考にしました。

    3. の XyJax に関しては解決していません。使用不可なのかも知れません。

    下記コードで MathJax のプレビューが可能です。これは、動的使用の一例です。

    <!DOCTYPE html>
    <html>
    <head>
        <title>MathJax Preview</title>
        <script>
            MathJax = {
                tex: { inlineMath: [['$','$'], ['\\(','\\)']]},
                //	V2 では下記1行で XyJax が使用可能だった
                //	TeX: {extensions: ['http://spacelike.in.coocan.jp/misc/xypic.js']}
            };
        </script>
        <script type="text/javascript" id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
        <!-- tex-svg.js の代わりに tex-mml-chtml.js の選択肢も有る -->
        <script>
            function makePreview(){
                var code = document.getElementById("MathInput");
                var output = document.getElementById("MathPreview");
                //output.innerHTML = code.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
                output.innerHTML = code.value;
                //V2 では下記1行で動的に使用出来た
                //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
                MathJax.texReset();
                MathJax.typesetClear();
                MathJax.typesetPromise([output]);
            }
        </script>
    </head>
    
    <body>
        <span style="font-weight:bold">MathJax コードを入力して、変換ボタンをクリックして下さい</span><br />
        <textarea id="MathInput" cols="120" rows="20">\[&#10;&#10;\]</textarea><br />
        <button type="button" onclick="makePreview()">変換</button><br />
        <div id="MathPreview"></div>
    </body>
    </html>
    

    V3 は XyJax が使えない(使い方が判らない)ので当ブログでは使えませんが、実は、当ブログで使えない理由は他にも有ります。当ブログでは MathJax 設定用のファイルを読み込むことで MathJax を使えるようにしています。その設定ファイルはココログに置いているのですが、今年春のココログ改悪により設定ファイルの類いを新たに保存することが出来なくなっています。すなわち、 MathJax の設定ファイルを変更することが出来ません。そんな訳で当分は V2.7.5 のままになります。

    ココログのファイル操作に関しては、今後も現状のままなのだろうか?

    ところで、 V2 では、ディスプレイモードの時は「\\」で改行できていたのですが、 V3 ではディスプレイモードというだけでは「\\」での改行は出来ないようです。複数行にするには、例えば align などの環境にしないといけないようです。

    2019年5月 3日 (金)

    サイトマップの文字コード

    今までにも、このブログのサイトマップを Google に送信しようとしたことは有るのですが、ことごとく失敗に終わっています。何かヒントは無いかと検索もしてみたのですが、解決には至っていません。

    実は、このブログとは別に FlatTable 公開用のサイトを開設しているのですが、今までは、そちらのサイトはサイトマップの作成方法を知らなかったこともあり、サイトマップ無しのままでした。しかし、クロールの効率化になればと思い、最近になってその方法を調べてサイトマップを作成してみました。サイトマップには幾つか種類が有るようですが、最も簡単なテキスト形式(.txt)のものにしました。これは必要な URL を1行に1つずつ記述するだけなので簡単です。

    作成して、いざ送信。しかし、結果は「取得できませんでした」。このブログのサイトマップと同じ結果です。ファイルの条件は、文字コードが UTF-8 で、拡張子が .txt なのですが、そのサイトマップは Shift-JIS で作成していました。これは、知らずにやった訳ではなくて、どうせ使用する文字は ASCII 限定なので、 Shift-JIS も UTF-8(BOM無し) も同じデータのはずだから、敢えて Shift-JIS で作成したのです(エディタのデフォルトが Shift-JIS)。しかし「取得」に失敗したので、ファイルを UTF-8(BOM有り) で作成し直して再度送信したら、今度は「成功しました」。

    かつて、 FlatTable の公開にあたり、 .htaccess ファイルを BOM 有りの UTF-8 で作成したら SVG ファイルを正しく扱ってもらえなかったことが有ったので、今回も BOM 無しが良いと考えたのですが、それが間違いだったようです。

    FlatTable のサイトマップ送信が成功したので、当ブログのサイトマップがどうなっているか調べてみました。サイトマップを直接ダウンロードすることは出来ないので、一旦、サイトマップにアクセスし(ブラウザに表示)、それを「名前を付けて保存」しました。得られたファイルの文字コードは Shift-JIS でした。このココログが改悪される前ならば、 BOM を追加したファイルをサイトにアップロードすることも出来たのですが、改悪された現在、その手段が有りません。一応、サポートに報告はしたのですが、どうなることやら・・・。

    と、ここで話しは終わらず。ブラウザ(Chrome)経由で「名前を付けて保存」したファイルは、元のファイルと同じになるとは限らないようです。幾つか、同じ手順で保存したファイルを見てみると、ファイルによって文字コードがマチマチです。それも、元のファイルとは文字コードが違うこともあります。したがって、ココログのサイトマップが Shift-JIS だったのは、ブラウザ経由の「保存」だったからなのかも知れません。

    ついでに、もう1つ。(Chrome では)テキストファイルをブラウザに表示させて、それを「保存」しようとしたら失敗しました。出来ないんですか?

    訳の分からんことだらけ。

    P.S.:ココログは、以前のように、任意のファイルを任意のディレクトリにアップロード出来るようにして欲しいものです。今回のこともそうですが、 MathJax の設定ファイルをココログに置いているのに、それのメンテナンスも出来ません。ココログのバカ~!←大好きって意味だよ

    2012年2月19日 (日)

    かなり自由度が高い

    数年前からSNSで日記は書いていたのですが、ブログは見ているばかりでした。私の見て来たどのブログも記事中に Flash の表示が無かったので、Flash を表示出来るブログは無いのだろうと思っていたのですが、今回、このブログを始めてみて、ブログでも Flash を表示出来るんだということを知りました。

    普通に HTML を書けば良いだけです。因みに、1つ前の記事 Flash 版 FlatTableFlatTable が Flash を表示させたものです。

    SNSの日記では HTML タグに強い制限が掛けられており、<自前で> FlatTable を表示させることは出来ないのに比べて、ココログは、かなり自由度が高いと言えます。もしかすると他のブログでも同じく自由度が高いのかも知れません。そうだとすると、今まで見て来たブログで Flash が利用されていなかったのは残念です。

    ところで、今回、気になったことがもう1つ。記事を入力する画面に、ボールドとイタリックを指定するボタンが有り、それによって生成されるタグが「strong」と「em」となっていますが・・・

    これは違うだろ!

    「strong」と「em」は、その部分を強調するタグであり、ボールドとイタリックは文字の形態を指定するものです。これを混同してはイカンだろ。

    まだココログでの CSS の設定方法を知らないので、しばらくは不本意なタグで済ますことにします。とりあえず、「strong」は「b」に替えました。

    始まります

    某SNSでビリヤードの日記を書いています。その日記で使用する配置図を作成するソフト FlatTable(Flash 版)を自作し、下記サイトで公開しています。

    http://spacelike.in.coocan.jp/flat/

    SNSで書いている日記はビリヤード限定としているので、プログラミングに関することを書くために当ブログを始めました。

    現在、上記 FlatTable の SVG+JavaScript への移植作業を進めています。当面、このブログでは、その移植作業の進捗を載せて行く予定です。

    ただ、SVG も JavaScript も、今回の移植をきっかけに始めたので、勉強しながらの作業となります。そして今、上記サイトで SVG ファイルを扱えないという現象に悩んでいるところです。非常に困っています。

    遅くとも年内の完成を目指して、出発!!