2019/11/25

Google Code Prettify を使う

Google Code Prettify は、HTML 文書上で様々なプログラミング言語のコード断片を綺麗に表示するための JavaScript ライブラリです。

Google Code Prettify の組み込み方

HTML 文書のヘッダに
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
のように入れてあげるだけで、CDN 経由で Google Code Prettify が読み込まれます。

コード断片の書き方

コード断片の箇所では、
<pre class="prettyprint">
public static void main(final String[] args) {
  System.out.println("Hello, World!");
}
</pre>
のように <pre> ブロックを作ってあげれば、OKです。以下のような表示になります。
public static void main(final String[] args) {
  System.out.println("Hello, World!");
}
言語は自動判別されますが、うまく判別されないなどの理由で直接指定したい場合は class="prettyprint lang-lisp" のように指定できます。
また、class="prettyprint linenums" とすると、行番号が表示されます。

見た目のカスタマイズ

行番号は標準では5行ごとにしか表示されませんが、毎行表示したい場合は以下のように CSS 定義を上書きします。
<style>
.prettyprint ol.linenums > li {
  list-style-type: decimal; 
}
</style>
このブログのスタイルでは、1行が長いときに横に突き抜けてしまったので、横スクロールバーが出るように、以下のスタイルも加えました。
<style>
pre.prettyprint {
  white-space: pre;
  overflow: auto;
}
</style>

2019/11/15

Serverless Web のクライアントサイドは Vuetify.js が良さそうに見える

最近、Serverless Web システムを構築したいとしばしば考えています。
Server-side (Serverless なのに Server-side でいいのか?) は、AWS で Cognito, API Gateway, Lambda, DynamoDB とかでいいのかなと思うのですが、Client-side で悩んでいます。

Serverless Web の Client-side は、Vue.js なんかを使うのがおそらく一般的なんでしょう。Vue.js なら使ったことがあるので、私もそうしたいです。
しかし私は Web デザインのセンスが無いので、デザインテンプレート (テーマ) が使える仕組みが欲しいんです。従来のサーバー型の Web であれば、Drupal みたいな CMS を使えばいいわけですが、Serverless だとどうするのかな、と。

で、ちょっと調べてみたんですが、Vue Material とか Vuetify.js なんてフレームワークがあるんですね。どちらも Google の Material Design 仕様に沿ったフレームワークで、テーマ機構があり、有償・無償のテーマが配布されているようです。

ちょっと情勢を見てみると、Vuetify.js が優勢なようです。

一旦、Vuetify.js に狙いを定めて、キャッチアップしてみようかと思います。続報を待て。

2019/11/11

Blogger と Adsense

このブログは Blogger を使っています。

最初、Google sites で考えていたのですが、Adsense 広告が載せられないということで、断念しました。
次に考えたのが Drupal で、AWS 上に EC2 + RDS Aurora で Drupal 8 環境を作ってみたのですが、あまりに高コストで、やはり断念。

結局、Blogger に落ち着きました。

で、Blogger で Adsense を使う場合、管理画面の収益メニューから、Adsense に申し込めるようになったら申し込む、という手筈らしいので、がんばって記事を書きつつ、申し込めるようになるのを待ってました。
でもなかなかならない。

でも、ちょっと変わった手順で、Adsense が有効になりました。


  1. Adsense のガジェットが標準で埋め込まれているテーマを選択する
    (普通は、Blogger から Adsense を有効化するまで Adsense ガジェットが配置できない)
  2. Adsense 管理画面のサイトメニューの方で、このブログのドメインを登録する
  3. 審査が通ると、広告が有効化する
    (でも Blogger は Adsense が有効になっているとは認識していない模様)


果たしてこれで収益入るんでしょうか。ちょっと様子見ます。