📱

iOS ファーストな CMS をショートカットで構築する

に公開
Web
ショートカット
CMS
GitHub API
zennfes2025free
tech

Web サイトの更新を iPhone から手軽にやりたい。
たどり着いたのはショートカットで作る CMS ツール群でした。

作った Web サイト

1日につき、画像1枚と短いテキストが入る日記サイトです。
SNS ライクな投稿ボリュームなので、絶対にスマホから更新したい。

https://diary.yamatoiizuka.com/

CMS の要件

ビルドは GitHub Actions で走らせるものとすると、CMS の要件としては下記の2点になりました。

  • GitHub 上の entries.json に対し、読み書きを行う
  • GitHub 上の /images ディレクトリに対し、画像の読み書きを行う

つまり特定のリポジトリ・ファイルに読み書きができれば、CMS として成立することがわかります。なんだかできる気がしてくる。

// entries.json
[
  {date: '2025-10-15', text: '金曜日は魚焼きグリルを使ってもいい日'},
  {date: '2025-10-14', text: '膝が心配になってきた'},
  ...
]

// /images ディレクトリ
- 2025-10-15.jpg
- 2025-10-14.jpg
...

CMS の機能

技術的な話の前に、今回制作した CMS の機能を紹介します。基本方針として、写真や日記のエントリーに直接的に紐づくタスク、として設計しました。

投稿

写真アプリ（iOS 純正アプリ、Lightroom など）からの直接投稿、日記サイト上での投稿ができる。

iOS Photo.app からの投稿

編集

日記サイト上で日付・コンテンツを動的に読み取り、表示中の投稿を編集できる。

表示中の投稿の編集

削除

日記サイト上で日付・コンテンツを動的に読み取り、表示中の投稿を削除できる。

表示中の投稿の削除

技術編：ショートカットを使ったファイルの読み書き

上記機能を実装するための基本的な技術編です。GitHub REST API を使って、ショートカットで最小限の CRUD（CREATE/READ/UPDATE/DELETE）構成を作っていきます。

これをベースに JSON のテキスト整形などを頑張ると、CMS としてそれなりに運用できるツール群として活躍してくれます。

作成（CREATE）

GitHub の REST API endpoints for repository contents を見ると、下記のコマンドでコンテンツの作成ができるとあります。

curl -L \
  -X PUT \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <読み書き可能なアクセストークン>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/repos/OWNER/REPO/contents/PATH \
  -d '{
    "message": "<コミットメッセージ>",
    "content": "<BASE64 に変換したコンテンツ>",
    "branch": "main"
  }'

ショートカットでは URL の内容を表示 アクションで、サーバーに同様のリクエストを投げることができます。例として、@yamatoiizuka/diary リポジトリに test.txt を作成します。

上から、テキスト、Base64 エンコード、URL の内容を表示
上からテキスト、Base64 エンコード、URL の内容を表示

このショートカットを実行すると GitHub 上に text.txt が作成されます。

「URL の内容を表示」の詳細（PUT）
項目 設定値
基本設定 方法: PUT
URL: https://api.github.com/repos/yamatoiizuka/diary/contents/hello.txt
ヘッダ Accept: application/vnd.github+json
Authorization: Bearer <読み書き可能なアクセストークン>
X-GitHub-Api-Version: 2022-11-28
本文を要求（JSON） message: <コミットメッセージ>
content: <BASE64 に変換したコンテンツ>
branch: main

アクセストークン（PAT）についての概要はこちら。
https://qiita.com/RyutoYoda/items/c6908025c0aef4b35cdd

取得（READ）

GETメソッドを使い、作成した test.txt を取得してみます。ヘッダと URL は先ほどの取得と同じ。

下記の例では「Hello World」の結果が返ってきている。


アクション名は、上からURL の内容を表示、辞書の値を取得、Base64 エンコード

「URL の内容を表示」の詳細（GET）
項目 設定値
基本設定 方法: GET
URL: https://api.github.com/repos/yamatoiizuka/diary/contents/hello.txt
ヘッダ Accept: application/vnd.github+json
Authorization: Bearer <読み書き可能なアクセストークン>
X-GitHub-Api-Version: 2022-11-28

更新（UPDATE）

すでに存在するコンテンツを更新するには、コンテンツのハッシュ値が必要になります。コンテンツをGETで取得し、PUTメソッドの使用時にハッシュ値shaをセットする。


上からURL の内容を表示、if文、テキスト、Base64 エンコード、URL の内容を表示

このショートカットを実行すると、GitHub 上の test.txt が更新される。

「URL の内容を表示」の詳細（GET）
項目 設定値
基本設定 方法: GET
URL: https://api.github.com/repos/yamatoiizuka/diary/contents/hello.txt
ヘッダ Accept: application/vnd.github+json
Authorization: Bearer <読み書き可能なアクセストークン>
X-GitHub-Api-Version: 2022-11-28
「URL の内容を表示」の詳細（PUT）
項目 設定値
基本設定 方法: PUT
URL: https://api.github.com/repos/yamatoiizuka/diary/contents/hello.txt
ヘッダ Accept: application/vnd.github+json
Authorization: Bearer <読み書き可能なアクセストークン>
X-GitHub-Api-Version: 2022-11-28
本文を要求（JSON） message: <コミットメッセージ>
content: <BASE64 に変換したコンテンツ>
branch: main
sha: <GET で取得した sha>

削除（DELETE）

続いて、test.txtをショートカットから削除します。こちらもハッシュ値shaが必要なので、GETのあとに削除DELETEを行います。


上からURL の内容を表示、if文、URL の内容を表示

このショートカットを実行すると、GitHub 上の test.txt が削除される。

「URL の内容を表示」の詳細（GET）
項目 設定値
基本設定 方法: GET
URL: https://api.github.com/repos/yamatoiizuka/diary/contents/hello.txt
ヘッダ Accept: application/vnd.github+json
Authorization: Bearer <読み書き可能なアクセストークン>
X-GitHub-Api-Version: 2022-11-28
「URL の内容を表示」の詳細（DELETE）
項目 設定値
基本設定 方法: DELETE
URL: https://api.github.com/repos/yamatoiizuka/diary/contents/hello.txt
ヘッダ Accept: application/vnd.github+json
Authorization: Bearer <読み書き可能なアクセストークン>
X-GitHub-Api-Version: 2022-11-28
本文を要求（JSON） message: <コミットメッセージ>
branch: main
sha: <GET で取得した sha>

応用編：共有シートからの入力を使ったレシピ

ここまでは CMS の基礎となる CRUD 構成について見てきました。なんだか学びがありますね。

続いては共有シートからの入力を使って、よりインタラクティブなショートカットを作るレシピを紹介します。

写真アプリから画像をアップロードする

共有シートの画像の入力を使って、写真アプリ（iOS 純正アプリ、Lightroom など）中の写真をアップロードするレシピです。投稿のショートカットでこの機能を使っています。

リサイズや JPEG 変換もショートカット上で行うことができます。WebP 対応してくれたらなー。


上から画像を変換、画像のサイズを変更、Base64エンコード、URL の内容を表示、アラートを表示


ショートカットを走らせた様子

「URL の内容を表示」の詳細（PUT）

構成は 作成（CREATE） と同じ。

項目 設定値
基本設定 方法: PUT
URL: https://api.github.com/repos/yamatoiizuka/diary/contents/hello.txt
ヘッダ Accept: application/vnd.github+json
Authorization: Bearer <読み書き可能なアクセストークン>
X-GitHub-Api-Version: 2022-11-28
本文を要求（JSON） message: <コミットメッセージ>
content: <BASE64 に変換したコンテンツ>
branch: main

Web サイトの情報を動的に取得する

同じく共有シートからの入力を使って、閲覧中の Web ページのタイトル、URL、ページの内容などを取得することができます。編集、削除のショートカットでこの機能を使っています。

下記の例（編集）では、スクロールに合わせてtitleを2025-10-12などに変更し、日付をキーにGETリクエストでコンテンツを取得、ダイアログのデフォルト値にセットしています。

総評

とても使い勝手がいいものができて満足。ただアクセストークンをショートカット内に直書きする必要がある以上、多人数での運用には向かないかなと思った。ショートカットをうっかり公開しないよう気をつけましょう。

小さな個人サイトを運用するにはちょうどいいと思うので、ぜひやってみてね。

Discussion