Development

Android版 Chrome でデバックする

この記事を書いた動機自分用のメモとして、実際にやったことを記録し、ノートを取るみたいな感じにしたいと思ったのと、私は、自分用のWebアプリみたいなのを開発しているのだが、その過程でスマホ版のブラウザでのデバックをしたくなったというのがある。二番煎じではあるが、他のブログでの説明はなんか画像とか少なくて不満があったというのもあり、ならば自分でやってみたらというところも経緯としてある。（自分も人のこと言えたほど大したこと書けないけど。。。）環境スマホ側 Pixel 5a 5G Android版 Chrome 131 Android 14 PC側 Windows 11 (linux環境でも同じことはできると思う) Windows版 Chrome 131 イメージ概要 adb コマンドの環境構築 USBデバックの接続 PCで chrome://inspect/#devicesを開くデバックしたいタブを選択して終わりデバックの仕方 adb をインストールする（PC側）開発ツールをダウンロード今回は、以下のページから"platform-tools-latest-windows.zip"をダウンロード SDK Platform-Tools リリースノート | Android Studio | Android Developers 開発ツールを展開と配置する適当な場所（ダウンロード）とかで展開し、配置する。今回は、“C:"直下に開発者ツールを配置することとする。 # ダウンロードして展開したフォルダの中に入っている、"platform-tools"を以下の様な形になるように配置する (base) PS C:\> ls platform-tools Directory: C:\platform-tools Mode LastWriteTime Length Name ---- ------------- ------ ---- -a--- 2025/01/11 0:20 5969000 adb.exe -a--- 2025/01/11 0:20 108136 AdbWinApi.dll -a--- 2025/01/11 0:20 73320 AdbWinUsbApi.dll -a--- 2025/01/11 0:20 451688 etc1tool.exe -a--- 2025/01/11 0:20 1874536 fastboot.exe -a--- 2025/01/11 0:20 54376 hprof-conv.exe -a--- 2025/01/11 0:20 242968 libwinpthread-1.dll -a--- 2025/01/11 0:20 479848 make_f2fs_casefold.exe -a--- 2025/01/11 0:20 479848 make_f2fs.exe -a--- 2025/01/11 0:20 1157 mke2fs.conf -a--- 2025/01/11 0:20 756840 mke2fs.exe -a--- 2025/01/11 0:20 1089833 NOTICE.txt -a--- 2025/01/11 0:20 38 source.properties -a--- 2025/01/11 0:20 2912360 sqlite3.exe 環境変数を設定する ...

hugoで画像を追加する 📷の補足

この記事を書いた動機ここでは前回、hugoのショットコードを使えば、もっといい感じに画像を表示できるように調整できるのではということがあったので、それをやってみた過程を記録します。 hugo のセーフティーを外さないで、画像を自在に表示できるはずだと思っていたのと、shortcodes について調べているうちに、テーマ側に画像を表示するための、figure という shortcode を見つけたというのがある。 ./theme/テーマ名/layouts/shortcodes/figure.html の存在に気づくことが、figure 発見のきっかけであった。 Features / Mods | PaperModでは、どうやって画像を表示するのか、私は見つけられなかった。（chrome で figure と検索をかけても出てこないので、ドキュメント見てどうしたら画像を表示できるか、すぐわかる感じじゃなさそう。）ちなみに、かろうじて figure shortcode が、 FAQs / How To’s Guide | PaperMod にどうやったら画像を中心揃えにできるかという話題で載っていた。この記事の目的明らかによくないことを書き直す前回のhugoで画像を追加する 📷では、hugo のセーフティを外すなど、よくない方法を紹介してしまっているので、それをできる範囲で改めようと試みる。多分今回の方法であれば、セーフティを外さなくてもうまくいくはずであるが、試す気力もないので検証はまだしていない。放置記事を何とかするそもそも、下の引用文にも書いてあるように、hugoで画像を追加する 📷の続きをすぐ書こうと当時思っていたのだが、結局やらずに何カ月も下書きのまま放置してたので、再び戻ってくることにした。もっとよさそうな方法 hugo 内蔵の画像表示機能を使う。追記（2025年1月26日） Hugo 自体にはそんなものない。hugo の shortcodes というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcodes を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。さらなる追記 (2025年1月30日) 今回、新たな間違いに気づいたので、ここにもその記録置いときます。。。なんでドキュメント見て気づけなかったんだろうとそんな気持ちです。。。（実は間違っていたと思っていることはあっていた。。。）追記 (2025年1月30日) 今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。hugo自体に画像を表示する機能がないというのは間違いで、気づけてないだけだった。 Figure | Hugo shortcode で画像を表示する選択肢テーマ付属の shortcode を使う自分で shortcode を適当に作る hugo 内臓の figure shortcode を使う（今回は検証とかしてないです。追記: 2025年1月30日） Figure | Hugo ...

テンプレ作成

つまずいたところ hugo でhtmlを拡張した形で書かれる、テンプレート？を作ろうとしたら、メンドウなことになった。 layouts の html ページの作成 hugo new layouts/baseof.html はできないことを知らなかったという。ちなみにこれを実行してしまうと一見うまくいったように見えるが、laytouts フォルダではなく、contentフォルダ配下にディレクトリやらファイルやらが生成されてしまうのでめんどくさくなる。ちなみにミスった時はこうなる # hugo new layouts/baseof.html Content "何かしらのパス/content/layouts/baseof.html" created . ├── archetypes ├── assets ├── content │ ├── _index.md │ └── layouts │ └── baseof.html ├── data ├── hugo.toml ├── i18n ├── layouts ├── public ├── res.txt ├── static └── themes 一部関係ない部分省略してここには書いてるので、layouts、contentフォルダだけ見てもらえればと思います。知らなかったこと hugoでのhtmlの書き方 hugo ではそのままhtmlを今までどおり書くことができるが、他のファイルやforループを行うこともできる。phpみたいなイメージに近いかも。Chat GPTに質問してみたらこんな感じになるらしい。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ .Title }}</title>  {{- partial "head_custom.html" . -}} </head> <body> <header>  {{- partial "header_custom.html" . -}} </header> <main>  {{- block "main" . }}{{ .Content }}{{ end -}} </main> <footer>  {{- partial "footer_custom.html" . -}} </footer>  {{- partial "footer_scripts.html" . -}} </body> </html> ちなみに公式ドキュメントはここら辺っぽい ...

hugoで画像を追加する 📷

　hugoとマークダウンで、画像を追加するのにてこずったので、適当に備忘録として残してみる。注意間違いの可能性（2025年1月26日追記）この記事は（というか今もそうかもだけど）作成当時とりあえず動くということを基準に Hugo をよくわかってなくて手探りで使ってたことやあんまりよくない方法を書いているので、かなり間違ったことを書いている可能性があります。ということで、別の記事に現状のやっていることをまとめなおすことにしました。 hugoで画像を追加する 📷の補足てこずったところマークダウン標準で画像は表示できるが、大きさを調整したり、スタイルを設定できない。 ![altText](imagePathFromStaticFolder) 非推奨自分が解決とした方法マークダウンにHTMLを書き、hugoのconfigに以下の設定を追加する。 <div style="display:flex; justify-content:center; margin:10px; "> <img style="margin:10px;" src="/imagePathFromStaticFolder" alt="追跡可能" width="200" /> </div> markup: goldmark: renderer: unsafe: true 動作の様子もっとよさそうな方法 hugo 内蔵の画像表示機能を使う。追記（2025年1月26日） Hugo 自体にはそんなものない。 hugo の shortcode というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcode を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。 hugoで画像を追加する 📷の補足追記 (2025年1月30日) 今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。「hugo自体に画像を表示する機能がない」というのは間違いで、気づけてないだけだった。 Figure | Hugo 分かった事 hugoには複数のマークダウンエンジンを使うことができ、自分が調べた当時では、デフォルトで goldmark というレンダリングエンジンが使われている。また少なくとも、hugoで使われている goldmark の設定では、HTML要素を描画することは危険ということで、デフォルトでマークダウン中にHTMLが書いてあっても描画しないようになっていた。よって、マークダウン中のHTMLをhugoとマークダウンの組み合わせでは、マークダウン中のHTMLを表示したいなら、HTML要素を描画することを、hugo.toml等の設定ファイルで明示的に指定する必要がある。事の発端マークダウン形式で画像を追加すると大きすぎてしまう。 ![altText](imagePathFromStaticFolder) html形式で書いてみると、全然見えない。 ...