babel と core-js を使って,古いブラウザをサポートする

Posted on 水 27 11月 2019 in 運用 • Tagged with Web, JavaScript, Webpack, Babel, ブログ

Sentry でたまに,古い OS からのアクセスによるエラーレポートが来る.現状,このブログの JS は let / const 普通に使ってるし, for-of なども使っている.なので,一世代前のブラウザなどを使っていると,そこら辺の機能に対応していなくてエラーになる.試しにこの辺を改善してみると,どうなるかのか観測してみたいなと思って,ちょっとサイト設定をいじってみた.そのメモ.

なお,使った環境は以下のもの:

babel 7 …

Continue reading

Sentry でエラー監視

Posted on 木 02 5月 2019 in 運用 • Tagged with ブログ, 監視, JavaScript

クロスプラットフォームのエラー監視を行う Sentry というサービスがある.ブログに試しに導入してみたので,それについて書く.

Sentry について

Sentry は,提供されている SDK を PHP コードや JavaScript コードに埋め込むことで,エラーを Sentry に送り,管理画面から確認できるようにするサービスだ.コードが https://github.com/getsentry …


Continue reading

KaTeX コードを静的にレンダリングする

Posted on 日 28 4月 2019 in 運用 • Tagged with KaTeX, Pelican, ブログ, Python, Node.js, JavaScript

ふと, KaTeX ってサーバサイドレンダリングできないかと思って試してみたら,普通に楽にできそうだったので,ブログでやってみることにした.

KaTeX をサーバサイドレンダリングする

特に難しいことはなくて, KaTeX は Node.js 上で動くっぽく,以下のようにすれば HTML を生成できるっぽい:

$ node --eval 'const KaTeX = require("katex"); console.log(KaTeX …

Continue reading

MathML にバイバイして, KaTeX に移行した

Posted on 日 21 4月 2019 in 運用 • Tagged with Pelican, MathML, ブログ, reStructuredText, JavaScript, CSS

以前ブログで数式環境を, MathML と MathJax で導入した.ただ色々敗北したので KaTeX を使うことにした.その備忘録.

MathML に敗北した

正確には, MathML は悪くないんだが,現状の MathML + MathJax 環境は色々辛いものがあった.

  • \mathit\mathrel などの基本的なコマンドに対応していない.
  • MathJax のレンダリングが遅い.
  • MathJax …

Continue reading

脚注のためのツールチップ追加

Posted on 月 15 4月 2019 in 運用 • Tagged with ブログ, Pelican, JavaScript, CSS

脚注をツールチップで見れるようにしたので,それについて.

reStructuredText の脚注

reStructuredText では脚注が使える.これは,以下のように書けばいい:

some text[#footnote-ref]_ .

.. [#footnote-ref] some footnote content.

こうすると,自動でナンバリングが行われ,それぞれ脚注へのリンクと元の文書へのバックリンクが生成される.分かりづらいがバックリンクは,数字の部分に当てがわれ,それをクリックすることで戻れる.ただ,これをクリックするのがめんどかったので,ツールチップで表示してみることにした …


Continue reading

ブログの overflow 時のスタイル設定を見直す

Posted on 月 15 4月 2019 in 運用 • Tagged with Pelican, ブログ, CSS

ブログの CSS で,幅がはみ出るような要素のスタイルを幾つか修正したので,その対応記録.

経緯

うちのブログではタイプライタ体や数式をよく使う.これは僕がプログラミングと数学寄りの記事を良く書くからだけど,ちょっと問題も起きていた.パソコンでの閲覧時はそれほど大きな問題にはならないんだが,スマフォなどの画面幅が短いモバイル端末ではタイプライタ体の文字が画面幅からはみ出て表示されて,閲覧の快適さがあまりなかった (誰から言われたとかではなく,単に僕が見る時不便だと感じていた).

問題となっていた要素は,以下のもの:

インラインリテラル
``inline literal`` で書けるやつ.プログラム片とかを書くのに使っていて, tt タグを使って変換される.
数式

以下の記法で書けるやつ …


Continue reading

MathML で数式を表示する

Posted on 日 14 4月 2019 in 運用 • Tagged with Pelican, MathML, ブログ, reStructuredText, MathJax, JavaScript

reStructuredText は数式表示に対応している.ただデフォルトのレンダリング表示がいまいちだったので,ちょっといじった.その備忘録.

math ディレクティブと docutils の設定

reStructuredText には math ディレクティブというものが標準で搭載されていて [1]TeX の記法を使って以下のように数式が埋め込める:

.. math::

  \forall a, b \in \mathbb{N}.\, a \leq …

Continue reading

sitemap の追加

Posted on 水 10 4月 2019 in 運用 • Tagged with SEO, ブログ, Pelican, Google Analytics

sitemap とかを追加してみたので,それの備忘録.

sitemap 周辺ファイルの追加

まず Pelican で sitemap を生成させる.これは sitemap プラグインを追加するだけでいい:

1
2
3
4
  PLUGINS = [
    ...
+   'sitemap',
  ]

後は SITEMAP に設定を書く.以下の感じのことを書いた:

SITEMAP = {
  'format' …

Continue reading

Google Analytics の導入

Posted on 月 08 4月 2019 in 運用 • Tagged with Pelican, ブログ, Google Analytics, SEO

Google Analytics を導入したので,やったことをまとめた.

トラッキング ID の設定

既に Analytics のアカウントは持っていたので,そのアカウントのプロパティを追加してトラッキング ID を入手するだけ.以下の手順を行うだけだった:

  1. https://analytics.google.com/analytics の管理ページ表示
  2. 「プロパティを作成」ボタンを押す.
  3. プロパティの項目を埋めていく.大体以下の感じ:
    • ウェブサイトの名前 …

Continue reading

ブログに共有ボタンを追加した

Posted on 木 04 4月 2019 in 運用 • Tagged with Pelican, ブログ, Python, JavaScript

ブログに共有ボタンを追加して, JavaScript を呼べるようにした.

導入までの経緯

Pelican には CSS を追加する仕組みはあるが, JavaScript を追加する仕組みはない.なので,テーマで対応していない JavaScript を使う機能は入れられない.これでは不便なので, JavaScript を無理やり追加することにした.

また,共有ボタンも現状テーマで対応していないため,無理やり JavaScript で追加することにした.静的に埋め込むこともできるのだが,どうせ JavaScript …


Continue reading