at backyard

Color my life with the chaos of trouble.

Pythonの小さなWebフレームワークBottleについているSimpleTemplate Engineを試してみた

Pythonで一番小さなWebフレームワークと言われているBottle。
このBottleにはSimpleTemplate Engineというテンプレートエンジンがついている

https://bottlepy.org/docs/dev/stpl.html

私は今までこれを使ったことがなかったのだが、先日自身が公開しているbottle-flash2というオープンソースのライブラリでこれに関するissueを頂き、その関係でちょっと触ってみた。

ちなみにそのissueというのがこれ。
(issueに気づくのが遅くなってしまって申し訳ない気持ちだ)

github.com

そしてこのissueに関係する形でSimpleTemplate Engineを触ってみたサンプルのリポジトリが下記となる。

github.com

SimpleTemplate Engineを用いた書き方(変数の代入, if, forループ)

SimpleTemplate Engineの使い方について一番上に貼ったドキュメントを見ればよいのだが、ドキュメントはなかなか簡素な形なので、備忘録として上のリポジトリでも利用しているSimpleTemplate Engineの書き方についてメモしておこうと思う。

SimpleTemplate Engineを用いた際の、変数の代入

ちなみにSimpleTemplate Engineを用いて、HTMLにPythonコードを埋め込む際は % を用いる。

下記はSimpleTemplate Engineのドキュメントから引用。 このように <%%> で囲むと、複数行のPythonコードが記載できる。

% name = "Bob"  # a line of python code
<p>Some plain text in between</p>
<%
  # A block of python code
  name = name.title().strip()
%>
<p>More plain text</p>

下は上に貼った自身で作成したサンプルリポジトリで用いている書き方だが、このようにすると messages という変数に値が代入される。
(app.get_flashed_messages()という関数は bottle-flash2 側で実装されている関数である。)

% messages = app.get_flashed_messages()

以上のように関数の実行なども当然できるので、サーバ側から渡ってきた関数を元に何かをするということもできる。

SimpleTemplate Engineを用いた際のif文やforループの書き方

iffor の書き方についても基本的には % を用いた上で実行すれば良い。

下記もサンプルリポジトリからの引用だが、 % がついている箇所に注意すれば何をやろうとしているかがわかると思う。
(ただ、SimpleTemplate Engineの書き方としてこれが適しているのかは分からない。公式ページを参照してみるのが正確かもしれない)

% if len(messages) > 0:
    <div id="flash_messages">
    <ul>
    % for m in messages:
        <li>{{ m[0] }}</li>
    % end
    </ul>
    </div>
 % end

なお変数内の値を展開する場合は {{ }} を利用する。

また、iffor を用いた際、 end で終了させる必要があるようなので、そこも忘れないように注意しておきたい。

以上、SimpleTemplate Engineを用いた際の備忘録となる。

pyenvをM1 MacにインストールしてPython環境を構築する

M1 Mac(Apple Silicon)に Python 環境を作りたくなったのでインストールしていく

基本的に私はGitで直接チェックアウトしてインストールする方法をいつも選択していたので、今回もこちらをセレクト。
( brew は使いません)

https://github.com/pyenv/pyenv#basic-github-checkout

pyenvをM1 Macに導入するまでの備忘録

以下、備忘録。

git clone https://github.com/pyenv/pyenv.git ~/.pyenv
cd ~/.pyenv && src/configure && make -C src

次に .zshrcに設定を反映させる。

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zprofile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zprofile
echo 'eval "$(pyenv init --path)"' >> ~/.zprofile

echo 'eval "$(pyenv init -)"' >> ~/.zshrc

そしてターミナルを再起動する。

ちなみに下記のコマンドを打ってもエラーになる。必要なのはターミナルの再起動

source ~/.zshrc

ターミナルを再起動すると、下記のようにpyenvが使えるようになっている。

pyenv --version
pyenv 2.0.4

現時点で最新の 3.9.6 をインストールする。

pyenv install 3.9.6

# pythonと打つことでシステム側のpythonを、
# python3と打つことで今回インストールした3.9.6を使えるようにする
pyenv global system 3.9.6

だが、

python3 --version
Python 3.9.2

となってしまう。

この 3.9.2brew でインストールされていたもののようだった。 だが、brew側で uninstall しようとすると、依存関係にあるツールがあるためアンイストールできないとエラーになる。

依存を無視して uninstall も可能だったが、それだと動かなくなるツールも出てきそうなので、一旦このままとする。

とりあえずは作業環境で下記のようにコマンドを叩いて動かすことにする。

pyenv local 3.9.6

以上、備忘録でした。

cssフレームワークのBULMAで text-align:center を実現したい場合は "has-text-centered"を使う

BULMAを使っていて text-align:center はどうやるのか、一瞬迷った。

ドキュメント上で cetner または text-align などと検索しても出てこないので、ないのかなと一瞬思ったがそんなことはなく、探した方が悪かっただけだ。

BULMAでtext-align:centerを実現する場合は"has-text-centered"を使う

該当するドキュメントは下記となる。

https://bulma.io/documentation/helpers/typography-helpers/#alignment

実際にHTMLで記述する場合は

<div class="has-text-centered">hogehoge</div>

と指定することで中央に配置される。

余談: Bootstrapでtext-align:centerを実現する場合は "text-center"

ちなみにBootstrapで同じことをやりたい場合は text-center となる。

<div class="text-center">hogehoge</div>

参照するドキュメントは下記

https://getbootstrap.jp/docs/5.0/utilities/text/#text-alignment

YouTube Premiumを3ヶ月無料で試せるキャンペーンの正体について調べてみた

YouTube Premiumをまだ試していない人は1ヶ月無料でYouTube Premiumを試すことができる。

だが、YouTube Premium で検索すると、検索結果に3ヶ月無料でという文字が踊る。
(下記の画像を参照)

f:id:shinshin86:20210724234320p:plain
どうせなら三ヶ月無料で利用したいところだ

条件を満たしているなら3ヶ月無料で利用できるキャンペーンを用いたほうが当然お得である。

そこで今回はYouTube Premiumを3ヶ月無料で試せるキャンペーンについて調べてみた。

ちなみに私は既にYouTube Premiumであり、無料特典は1ヶ月無料で行っているので、今回紹介しているものを試すすべはない。

「ここで書いてあったから試してみたのにできなかったじゃないか!」

という苦情には答えられないので、試す際は一応ご自身でも調べてから実行してみてほしい。
(キャンペーン対象期間が過ぎていることも考えられるので)

ちなみにこのキャンペーンを行っているのは、Google Asia Pacific Pte. Limited で、名前から察するにアジアを中心に展開しているキャンペーンなのではないだろうかと予測する(完全に自身の勝手な予想です)

目次

Google Oneを利用しているならYouTube Premiumを3ヶ月無料で試せる

まず上の検索結果に登場してきたキャンペーンだが、これはGoogle One を利用しているユーザに対して実行されるキャンペーンのようだ。
(既に検索結果に書いてあるが)

YouTube Premium を 3 か月間無料でお楽しみいただけます | YouTube

ただGoogle Oneを利用しているユーザに対して、どうやれば3ヶ月無料で試せるようになるのかが分からない。

上のキャンペーンページからの誘導も特にないので、これは完全に置いてけぼりを食らうパターンではないだろうか。

Googleは一見便利そうなキャンペーンを行っていても、それを実現させるまでの道のりが非常に分かりにくいというパターンが割とよくある印象。
もし私が村上春樹の小説の主人公なら、ここは「やれやれ」とつぶやくところだろう。

やれやれ

Chromebookを利用しているユーザならYouTube Premiumを3ヶ月無料で試せる

上の特典内容と若干似ているが、Chromebookを利用しているユーザならYouTube Premiumを3ヶ月無料で試せるようだ。

こちらキャンペーンページが用意されており、YouTube Premiumの特典についても下記のページからたどり着けるようになっている。

Chromebook の特典 - Google Chromebooks

試しに私がMacBookからアクセスしてみたところ、下記のような画面になったので、後はきみの目で確かめてみてくれ!

f:id:shinshin86:20210724235339p:plain

Y!mobileの回線を利用しているユーザならYouTube Premiumを3ヶ月無料で試せる

次はGoogle以外が主催しているキャンペーン。Y!mobile

Y!mobileの回線を利用しているユーザがそのSIMカードを挿入したiPhoneスマートフォンまたはタブレットから YouTube Premium に申し込むと、3ヵ月無料で利用できるようだ。

詳細は下記のキャンペーンページを確認してほしい。

YouTube Premium 3ヵ月無料キャンペーン|Y!mobile - 格安SIM・スマホはワイモバイルで

ソフトバンクユーザならYouTube Premiumを3ヶ月無料で試せる

こちらはソフトバンクユーザ向けのキャンペーン。

上のY!mobileと同じく、ソフトバンクの回線を利用しているユーザがそのSIMを設定した iPhoneiPadGoogle Pixel、その他Android搭載のスマートフォンまたはタブレットから YouTube Premium に申し込むと、3ヵ月無料で利用できるらしい。

YouTube Premium 3ヵ月無料キャンペーン | スマートフォン・携帯電話 | ソフトバンク

auを利用しているユーザならYouTube Premiumを3ヶ月無料で試せる

auからの加入でも同じように3ヶ月無料キャンペーンが試せる。

YouTube Premiumのご紹介 | エンタメ | au

Pokémon GOのトレーナーならYouTube Premiumを3ヶ月無料で試せる

いくつか通信業者経由でのキャンペーンを紹介してきたが、次はPokémon GO。

Pokémon GOのトレーナーならYouTube Premiumを3ヶ月無料で試せるらしい。

詳細は下記のページを見てみてほしい。

トレーナーの皆さん:YouTube Premium 3ヶ月分をプレゼント! - Pokémon GO

というわけで、YouTube Premiumを3ヶ月無料で試せるキャンペーンについて興味本位で調べてみた。

私自身は既にYouTube Premiumを利用しているため、これらのお得なキャンペーンの恩恵にあずかることはできないが、もしまだYouTube Premiumを利用していない方でこれらの条件にあう方は試してみてほしい。

また、他にもこんなキャンペーンがあるよ、というのがあればコメントください。

Googleが検索結果にAMP表示を出すことをやめたことについて。また、Habanero Beeの今後の対応について。

モバイルの検索結果からAMP対応を示す雷マークが消えた

9to5Googleの下記の記事によると、Googleの検索結果からAMPに対応していることを表す雷マークを削除したようだ。

9to5google.com

確かに実際に検索してみると、雷マークが表示されなくなっている。
(自身のサイトを例に取り恐縮だが、下記の自身のサイトはAMP対応している。以前だったらAMP対応済みであることを示す雷マークが表示されていたが、現在は既に検索結果から消えている。)

f:id:shinshin86:20210722074815p:plain
以前であれば表示されていた雷マークが消えている

※なお、上のキャプチャはChromeのモバイル表示でスクショしているが、iPhoneSafariから検索しても同様の表示となっていることを確認している

ちなみにAMPのアイコンは消えているものの、検索結果からアクセスするとAMPページにはアクセスされる。
ここの挙動については変更はされていない。

なお、Googleはこの変更について4月に発表していた。
すでにインターネットのメディアで取り上げられていたのを見て、知っている方も多いだろう。

AMP対応する意味はなくなったのか?

さて、このようにGoogleの検索結果からはAMP対応かどうかは分からないような変更が加わったが、ではそもそもAMP対応することの意味はなくなったと言えるだろうか、というと、

まだ、AMP対応する意味はある(と思いたい)。

そもそもの話だが、AMP対応自体の根本的な意義としては、ウェブのベストプラクティスをサイト側に行わせるための施策である。
よってAMPに対応しているということは、必然的にパフォーマンスの良い使用感に優れたサイトであることは間違いない。
(もちろん代償としてはJavaScriptを利用したリッチな表現ができなかったり、それなりに大きい)

そのためAMPに対応すること自体の意味はなくなっていないと私は考えている。

ただ、検索結果のAMPアイコンなどは多少は、AMP非対応のサイトとの(見た目的な意味での)差別化要因となっていたので、これが今後クリック率にどう影響を与えるかはチェックしておいたほうが良いと思われる。

私の個人的な意見としては、AMPにきっちり対応しなくとも、ある程度パフォーマンスに優れたサイトを構築できれば、それでいいのかも知れないと考えている。
(AMP対応することによる制約の大きさによる苦労は、Habanero Beeの開発を通じてそれなりに味わった)

Habanero Beeの今後の対応方針

f:id:shinshin86:20210722080053p:plain
AMPに対応した静的サイトを素早くデプロイできるオープンソースプロジェクト、Habanero Bee

最後に私が開発しているHabanero Beeについての今後の対応方針について述べていく。

※Habanero Beeとはなんぞや?という方は下記の記事を読んでください。

zenn.dev

現状では、AMP対応のサイトを構築できるというメリットの打ち出しをやめる気はない。

上でも書いたとおり、AMPに対応できるということは必然的にある程度のパフォーマンスを確保できることと同義だからだ。

そのため、現状開発の方針を変える気はないが、引き続きAMPに関する話題は追っていく予定である。

AMP対応することの大変さ

Habanero BeeはAMP対応を打ち出しているが、やはりというか、実際に開発してみて思い知ったのはAMP対応することによる制約の大きさだ。

リッチな表現ができないぐらいであれば許容できる範囲だったが、Google AdSenseや新しいGoogle Analytics(GA4)に対応していないなど、Googleが関わっているプロジェクトなのにも関わらずAMPに関する対応は明らかに不足している。
(おそらく中の人も大変なのだろうとは思う)

zenn.dev

これまではAMP対応することによるメリットを天秤にかけた上でこれらのことには目をつむってきたが、今後AMP対応に関するメリットよりもこれらの不満のほうが大きくなればHabanero Beeの方針を変更するかも知れない。
(もしくは似たようなプロジェクトを別に作成するかも知れない。どちらがいいのだろう?AMP対応がさくっと行えることは一つのアドバンテージであると思うが、それが未来永劫続いていくわけではないだろう)

というわけで、今のところHabanero Beeの方針を変更する予定はないが、今後のAMPに関する状況、またモバイル検索結果に関する何かしらの変更があれば、都度都度考えては行くと思う。

BootstrapのBorder spinner (ローディングスピナー) が動かないときにチェックすること(Bootstrap v4)

f:id:shinshin86:20210720074601p:plain

Bootstrap(v4)の下記のページを参考にしてBorder spinnerを表示させようとした際、そのままコードをコピペしただけでは動かなかった。

getbootstrap.com

本来ここに表示されているコードをそのままコピペするだけで動くはずだが、コピペしてもローディングスピナーは表示されない。

はて?と疑問に思ったが、読み込んでいるBootstrapのversionが古かったのが原因のようだ。

下記は読み込んでいるBootstrapのバージョンを修正した際のdiff。

diff --git a/public/index.html b/public/index.html
--- a/public/index.html
+++ b/public/index.html
@@ -26,8 +26,8 @@
     -->
     <link
       rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
-      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
     <script

このようにv4の最新版( こちら )のversionのBootstrapを読み込むようにすることでローディングスピナーが表示されるようになった。

娘の記録(育児日記メモ)

最近の娘のことを簡潔に書いていく。

数年後、この文章を読んで、「こんなこともあったな〜」と思い返せるような未来の自身に当てた育児日記的な役割を果たすことになる。

保育園に通い出した

今年度から娘は保育園に通いだしている。
最初の方は保育園に送りに行くと泣き出すこともあったものの、すぐに慣れて、今では送っていくと保育園の先生にじゃれついたり、おもちゃを持って遊びだしたりして楽しそうだ。

保育園に通いだしてから体調を崩すようになった。
これは 育児あるある のようで、保育園で他の園児から菌をもらったりするなどして、すぐに体調を崩してしまうようだ。
現にいまもRSウィルスというのが流行っており、半数近くの園児たちが休んでいる。
(幸いにも娘は大丈夫なようだが)

なお、娘が体調を崩すようになったのにつられて、我々も体調を崩すようになった。

娘が鼻水と咳を出すようになると、数日後には私も同じ症状が出る、といった形で、明らかにうつされている形だ。

こういう親御さんは多いらしい。なるほど、子供の症状は親にもきっちり伝染るのだ。

娘は頑固&破天荒。そしておしゃべり

これは生まれた直後から病院の方々にも言われていたことだが、娘は意思がはっきりしている子供で、「自分が一度決めたことはやり抜くまでやめないし、なにか言われても頑なに意思を変えることは絶対にしない性格」である。

それは今も健在で、超がつくほど頑固である。
こういうのは大変な反面、まあ頼もしいというか、将来起業家にでもなりそうな雰囲気を感じるが、まあこういうのはどこにでもある『親バカ思考』なのだろうなと妻と笑うことがある。

あと遊んでいたぬいぐるみに対していきなり冷徹な攻撃を食らわしたり、少しサイコパスっている一面も見せているのが、まあ大丈夫だろう。

そして元気いっぱいな破天荒ぶりも見せる。

娘は基本的に自分で何もかもしたいタイプのようで、外に行くときも抱っこをするとキレる。
自分で歩くのは問題ないが、危なっかしく階段を登り始めたり、いきなり走り出して転んで泣く、という行為を3秒ぐらいの低スパンで実現させるなど、「目が離せない行動」が多い。

さすがに道路付近では手は絶対に離さないが、まあ異常に行動的な側面を持っており、目が離せないことが多い。

そして娘はかなりおしゃべりだ。

起きているあいだじゅう、ずっとおしゃべりしながら何かをしている。

体は小さいのに、よくスタミナが尽きないな〜といった感じである。

これは保育園の先生からもよく言われることで、

「〇〇ちゃんはずっとおしゃべりしていますね〜」

とよく言われる。

日中、そんな感じでずっとフルスロットルで生きているため、眠りだすと、もう深く眠る。

夜泣きをすることが殆どない。

そういう点で我々夫婦は恵まれているのかも知れない。

少し前にもツイートしたが、そう言えば最近は様々な言葉を発するようになった。

これからいろいろな言葉を発していくようになるだろう。

(そう言えば少し前に急に私のことを「先生」と呼び始めて何事かと思った)

そんなわけで娘の記録は以上となる。

健やかにこのまま育っていってくれ。