投稿

3月, 2022の投稿を表示しています

画像や CSS の参照を GitHub Pages に変更

この記事は以下の記事の GitHub から画像を参照する話の続きになります。 https://first-step-of-3930.blog.uttne.net/2022/03/blog-post_70.html GitHub の画像を参照する方法を変更 記事にも書きましたがこのブログでは本文や画像などのデータを全て GitHub で管理する方向で整備を行っています。 このため、記事から参照する画像などは GitHub から取得する必要があり、そのための URL を Python で作成しています。 その URL は GitHub の Raw ファイルを参照するものなのですが以下の StackExchange によるとサービスの悪用と見られかねないらしいので GitHub の静的ホスティングサービスである GitHub Pages でレポジトリを公開し、画像や css を取得する方法に変えました。 CSS file from GitHub pages sent as text/plain, needs to be text/css - StackExchange また、 GitHub Raw で css を取得しようとすると MIME タイプが text/css ではなく text/plain になってしまうので HTML の head に link を書いても読み込まれないという問題が発生したのでこれを解決するためにも GitHub Pages を使用しました。 やったこと やったことは単純で以下の2つです。 レポジトリを GitHub Pages で公開 URL の生成部分で GitHub Pages の URL を生成するように変更 GitHub Pages でレポジトリを公開する方法は多くの方が説明してくれているのでここでは省きます。 公式ページにも丁寧な解説があるのでそちらをご確認することをお勧めします。 すでにあるレポジトリを公開する場合はこの GitHub Pages サイトの公開元を設定する - GitHub Docs から見るのがいいと思います。 URL を生成する部分の変更は raw.githubusercontent.com から uttne.github.io というドメインに変更したことと...

ブログの投稿スクリプトと画像

イメージ
Blogger API での画像 Blogger に記事を投稿する際、画像を一緒に投稿できたら便利だなーと Blogger の API を確認してみましたが、残念ながら画像を投稿できそうな API が見つかりませんでした。 どうも調べてみると Blogger の画像自体は Google アルバム アーカイブ に保存されているよう。 別の話になりますが、 Blogger のエディターを使ってアップロードした画像を消したくなったときはここから消せばよさそうです。 多分 Google の別のサービス (Google フォト?) の API を使用すれば多分同じことができるのだと思いますが、記事のソースである Markdown と画像が GitHub と Google アルバム アーカイブ に別れて管理されるのは美しくないので画像も GitHub に管理することにしました。 GitHub の画像の参照 GitHub のレポジトリに画像をアップロードするとその画像を参照する URL を発行してくれます。 今回はその URL をブログの記事に埋め込んで画像を表示しようと思います。 コミットした画像はその際のハッシュとリポジトリ内のパスを使って参照する URL を求めることができます。 例えばこのブログのソースを管理しているレポジトリのある画像は、以下のパラメータを組み合わせて画像のデータを参照する URL が次のように求まります。 パラメータ パラメータ 値 GitHub のレポジトリの URL https://github.com/uttne/blog.git 画像をコミットしたときのハッシュ値 3143021a9a16cb5a66b0125fdd6a77e86039cb87 リポジトリ内の画像のパス posts/00003-upload-images-test/test-image.png 求められる URL https://raw.githubusercontent.com/uttne/blog/3143021a9a16cb5a66b0125fdd6a77e86039cb87/posts/00003-upload-images-test/test-image.png raw.githubuser...

画像の投稿テスト

イメージ
画像の投稿テスト

投稿スクリプトを公開

投稿の自動化 ブログの投稿を自動化するためにスクリプトを作成してみました。 ソースコードは ここ にあります。 投稿は Markdown で書きたかったので調べてみたら StackEdit という便利そうなツールがありましたが、やっぱり使い慣れている VSCode を使いたいと思ったので Python でスクリプトを書きました。 GitHub で記事の内容も管理できるようになったのでバージョン管理もしやすくなったし、もしも Blogger がサービス終了となっても内容が残るのでいい感じではないかと思ってます。 つまずいた所 API の使用方法 Blogger の API を使用しなければならないのでまずは開発者ドキュメントとサンプルコードを探しました。この2つは Google で検索すればすぐに見つかったのですが認証をする所でちょっと躓きました。 とりあえず認証をしなければいけないので GCP の APIとサービスで OAuth 2.0 クライアント ID を作成し、 Google API の Python ライブラリレポジトリにあった oauth-installed.md というドキュメントを参考に API にアクセスできるか試して見たのですがなぜかアクセスすることができない。 色々調べると以下のコードに問題があったようでした。 credentials = flow . run_console () Credentials を取得するコードなのですがコンソールに表示される URL にアクセスしても Error 400: invalid_request と表示されて code が取得できない。どうも redirect_uri に urn:ietf:wg:oauth:2.0:oob を設定するとダメなようでした。似たような現象で困っている人が stack overflow に 質問 を投稿されていたのでそれを参考にしました。 なぜ urn:ietf:wg:oauth:2.0:oob はだめなのかまではよくわからなかったですが、とりあえず以下のようなコードで何とか Credentials を取得できるようになったのでとりあえずはよしとします。どなたかなぜこの urn を設定できないかご存知の方がいらっしゃいましたら教えてく...

[テスト] Python での投稿テスト

[テスト] Python でブログ投稿をしてみる。

SNSのアイコン表示

イメージ
Twitter と GitHub のアイコンを表示してみました。 Blogger は HTML をそのまま書くことができて便利ですね。 カスタマイズがいろいろできそうなので、まずはコードにシンタックスハイライトを付けるところを目指してやっていこうと思います。

ブログのいっぽめ

ブログをはじめてみました。 最近、文章で内容をまとめるという能力の低さを何とかしたいという思いが沸々と湧き上がってきたので、じゃあとりあえずブログでもやってみるかと手を出してみました。 内容は決めていませんが、 Qiita に投稿するよりも荒い IT の話題であったり、作業記録、趣味の楽器練習の備忘録を投稿するかもしれません。日記などもいいかも。 あとは読んだ本に対して自分はどう思ったのかなどできれば書いていきたいです。人に自分の思ったことや考えを共有するということが苦手なので改善していきたい。 なんにせよ、これから徐々に文章を書くことを頑張っていこうと思います。 お暇な人はたまに目を通していただけると嬉しいです。