タブに埋もれがちなテックブログをPakeでアプリ化しました
こんにちは。Algomatic でソフトウェアエンジニアをしている Go（@53able）です。
今回は、Algomatic のテックブログ https://tech.algomatic.jp/ を、macOS 向けのデスクトップアプリ「Algomatic Tech Blog」としてパッケージ化しました。まずは成果物として、macOS arm64 版の zip ファイルを GitHub Releases から公開しています。
- v1.0.0 Release: https://github.com/53able/algomatic-tech-blog-desktop/releases/tag/v1.0.0
今回使用したのは「Pake」です。これは Web ページを Tauri ベースのデスクトップアプリとしてパッケージ化する CLI ツールで、README には macOS、Windows、Linux に対応した軽量なデスクトップアプリ生成ツールとして紹介されています（tw93/Pake README）。
- はじめに
- Pake で何を作れるのか
- まず macOS arm64 版に絞った理由
- .app を生成したコマンド
- 成果物を GitHub へ公開する形にまとめる
- ビルド結果と検証
- リポジトリと Release を公開する
- Windows と Linux のビルドは GitHub Actions に逃がす
- ライセンス注記は README から切り出した
- iframe 拒否ヘッダがあってもビルドは通った
- URL から配布用アプリまで持っていけた
- エンジニアを募集しています！
- 参考リンク
はじめに
今回のきっかけは、「自社テックブログをブラウザで開く Web ページではなく、単独で起動できるアプリとして扱えるか」を試してみたいと思ったことです。テックブログは採用活動や技術広報、社内外への知見共有を担う重要なメディアです。しかし日常では、ブラウザのタブの一つとして埋もれがちで、アプリケーションとしての存在感が薄れてしまう傾向があります。
今回の課題は、このように埋もれやすい Web メディアを、単独で起動できる独立した成果物として切り出せるかどうかでした。
既存のサイトを作り替えるのではなく、デスクトップアプリとしてそのまま切り出せるかを確認しました。目的は新しい CMS やフロントエンドを開発することではありません。すでに存在するテックブログを Pake で包み込み、配布可能な形にできるかを検証するのが狙いです。
実施した内容は大きく分けて 3 つです。
- 対象 URL を Pake CLI で macOS アプリ化しました
- 生成された .app ファイルを zip に圧縮し、成果物として残しました
- バイナリ形式や Info.plist、署名検証を確認しました
加えて、Windows や Linux 向けには GitHub Actions のビルド定義を用意し、成果物は GitHub の新規リポジトリで公開する形にまとめました。
image図 1: Pake CLI を使って対象 URL を変換し、macOS アプリ、ZIP ファイル、検証結果、そして Windows/Linux 用の CI 定義までを生成するまでの流れ。
Web 技術を使ってデスクトップアプリを作る歴史は古く、その背景には長い前史があります。代表的な Electron は、GitHub の Atom エディタを支えるために作られた Atom Shell をルーツとしています。Electron の公式ブログでは、最初のコミットが 2013 年 3 月 13 日に行われ、Atom のパブリックベータ版は 2014 年 4 月に公開されたことが振り返られています（10 years of Electron）。
Electron は HTML、CSS、JavaScript を使ってデスクトップアプリを開発する選択肢を広げました。一方で、Chromium と Node.js を同梱する構造上、配布ファイルのサイズが大きくなったり、メモリ使用量が増えたりしやすいという課題もあります。
Tauri はこの文脈で登場し、OS のネイティブ WebView を利用して、Rust でデスクトップ側の機能を扱う設計を採用しました。Tauri の公式ドキュメントでは、任意のフロントエンドを HTML、JavaScript、CSS として組み込み、システムのネイティブ WebView を活用することで、非常に小さなバンドルサイズを実現できると説明されています（What is Tauri?）。
Pake は、その Tauri の上に「URL を渡すだけでアプリ化する」という機能を追加したツールです。今回の試みは、Electron 以降の「Web をデスクトップへ持ち込む」という流れを、Web サイト単位で実際に動かしてみた小さな実験と言えます。
まず macOS arm64 版に絞った理由
最初に決めたのは、対象を https://tech.algomatic.jp/ に限定することでした。新しくランディングページを作るのではなく、すでに公開されているテックブログそのものをアプリ化します。
次に、アプリ名を「Algomatic Tech Blog」とし、まずは macOS arm64 向けの .app ファイルを作成する方針にしました。Pake は Windows や Linux 向けビルドにも対応していますが、最初から全 OS の成果物を同時に揃えるよりも、まず 1 つの OS で「Web サイトがアプリ化できる」状態を作り、「成果物として確認できる」環境を整える方が効率的だと判断したからです。
そのため、ローカル開発では macOS 版を直接作成し、Windows や Linux 向けには GitHub Actions のワークフローを用意する形をとりました。
.app を生成したコマンド
ローカル環境では、以下のコマンドを実行して macOS 用の .app を生成しました。
PAKE_CREATE_APP=1 npx pake-cli@3.11.10 https://tech.algomatic.jp/ \
--name "Algomatic Tech Blog" \
--title "Algomatic Tech Blog" \
--width 1440 \
--height 900 \
--min-width 900 \
--min-height 600 \
--enable-find \
--app-version 1.0.0
PAKE_CREATE_APP=1 は、macOS で .app バンドルを作成する際に指定したパラメータです。Pake の CLI ドキュメントによると、通常は DMG ファイルが生成されますが、テスト用に直接 .app を作りたい場合はこのフラグを使用します（Pake CLI Usage Guide）。
成果物を GitHub へ公開する形にまとめる
生成された .app ファイルは、公開用の作業ディレクトリに整理しました。
./algomatic-tech-desktop/
├── Algomatic Tech Blog.app
├── Algomatic Tech Blog-macOS-arm64.app.zip
├── README.md
├── LICENSE-NOTE.md
└── .github/workflows/build-pake.yml
README.md には再ビルド時のコマンドを、LICENSE-NOTE.md には Pake の出力に関する例外事項とブランド資産についての注記を残しています。
ビルド結果と検証
Pake によるビルドは成功し、macOS arm64 向けの zip ファイルサイズは約 6MB となりました。
✔ Build success!
✔ App installer located in ./algomatic-tech-desktop/Algomatic Tech Blog.app
生成後は、file コマンド、Info.plist の確認、そして codesign による署名検証を行いました。
file 'Algomatic Tech Blog.app/Contents/MacOS/pake-algomatictechblog'
plutil -p 'Algomatic Tech Blog.app/Contents/Info.plist'
codesign --verify --deep --strict 'Algomatic Tech Blog.app'
確認できた結果は以下の通りです。
Mach-O 64-bit executable arm64
CFBundleIdentifier => com.pake.a2a258c
CFBundleName => Algomatic Tech Blog
CFBundleShortVersionString => 1.0.0
codesign verify: ok
image図 2: 今回の作業で得られた成果。macOS アプリの生成、zip 化、Info.plist の確認、コード署名の確認、CI 定義の作成に焦点を絞っています。
リポジトリとリリースを公開する
作成した成果物は、GitHub のパブリックリポジトリで公開しました。
macOS arm64 向けの zip ファイルは、v1.0.0 のリリースアセットとしてアップロード済みです。
Windows と Linux のビルドは GitHub Actions に任せる
ローカル環境では macOS 版を作成しましたが、Windows および Linux 向けには GitHub Actions のワークフローを用意しました。
作成したファイルの場所は以下の通りです。
./algomatic-tech-desktop/.github/workflows/build-pake.yml
このワークフローでは、3 つの異なるランナーを使用する構成にしています。
strategy:
fail-fast: false
matrix:
include:
- os: macos-latest
targets: universal
artifact_name: algomatic-tech-blog-macos
- os: windows-latest
targets: x64
artifact_name: algomatic-tech-blog-windows-x64
- os: ubuntu-22.04
targets: deb,appimage
artifact_name: algomatic-tech-blog-linux-x64
Linux 用のランナーには、Pake や Tauri をビルドする際に必要な依存関係も追加しています。
sudo apt-get install -y \
libwebkit2gtk-4.1-dev \
build-essential \
curl \
wget \
file \
libxdo-dev \
libssl-dev \
libayatana-appindicator3-dev \
librsvg2-dev \
patchelf
Pake の公式ドキュメントにも、GitHub Actions を使ったオンラインビルドの手順が用意されています（Pake GitHub Actions Usage Guide）。今回はその方針に合わせ、OS ごとのランナーを分ける構成を採用しました。
ライセンス注記は README から切り出した
Pake の本体は GPLv3 ライセンスですが、これには「Pake Output Exception」という例外規定が存在します。この例外では、標準的な Pake のビルド・パッケージングプロセスを通じて生成された対象アプリケーションについて、「Pake 由来のコードが含まれているからといって、成果物全体が GPLv3 に縛られるわけではない」と明記されています。つまり、任意のライセンス条件で配布することが可能です（詳細は Pake LICENSE-EXCEPTION を参照）。
今回は Pake 本体を改変して配布しているわけではありません。あくまで Pake CLI で生成されたアプリ成果物と、そのビルド手順を公開するものです。ただし、Web サイトの本文やロゴ、アイコン、商標、ブランド資産に関する権利は、Pake のライセンスとは別に扱われます。
そのため、公開リポジトリには LICENSE-NOTE.md という別ファイルを追加しました。README からもこのファイルへのリンクを設けています。主な注記内容は以下の通りです。
- Pake 本体は「GPLv3 + Pake Output Exception」であること
- 生成されたアプリは「Pake の出力物」として配布されていること
- Pake 本体の改変版を再配布しているわけではないこと
- Web サイトのコンテンツ、ロゴ、商標、アイコン、ブランド資産は各権利者に帰属すること
- このリポジトリは生成アプリとビルド手順の公開であり、元サイトのコンテンツやブランド資産の二次利用許諾ではないこと
iframe 拒否ヘッダがあってもビルドは通った
対象サイト https://tech.algomatic.jp/ には、以下のレスポンスヘッダが設定されていました。
content-security-policy: frame-ancestors 'none'; upgrade-insecure-requests
x-frame-options: DENYこれは iframe 埋め込みを拒否する設定です。詳細な影響分析までは行っていませんが、今回の Pake によるビルド自体は成功しました。
URL から配布用アプリまで持っていけた
Pake を活用し、https://tech.algomatic.jp/ を macOS 向けのデスクトップアプリに変換しました。
得られた成果は以下の通りです。
| 項目 | 結果 |
|---|---|
| macOS arm64 .app の生成 | 成功 |
| macOS app zip の作成 | 成功 |
| バイナリ形式の確認 | Mach-O 64-bit executable arm64 |
| Info.plist の確認 | アプリ名・バージョンを確認 |
| codesign --verify --deep --strict | 成功 |
| Windows / Linux 用 CI 定義 | 作成済み |
GitHub リポジトリの公開
完了
Release アセットの登録
完了
LICENSE-NOTE.md の追加
完了
Web 技術をデスクトップアプリへ持ち込む流れは、Electron、Tauri、そして Pake と形を変えながら続いています。今回の約 6MB の zip ファイルはその流れを体感できる成果物です。さらに GitHub リポジトリの作成や Release アセットの登録、ライセンス注記の明記を行うことで、他の人が成果物と必要な前提条件に容易にアクセスできる状態を整えることができました。
エンジニアを募集しています！
ここまでお読みいただき、ありがとうございます！
Algomatic では、「AI 革命で人々を幸せにする」をミッションに掲げ、変化の激しい領域でも学びや試行錯誤を続けられるエンジニアを募集しています。
少しでも興味を持っていただけた方は、ぜひカジュアル面談にお越しください！
参考リンク
- Pake README: https://github.com/tw93/Pake
- Pake CLI Usage Guide: https://github.com/tw93/Pake/blob/main/docs/cli-usage.md
- Pake GitHub Actions Usage Guide: https://github.com/tw93/Pake/blob/main/docs/github-actions-usage.md
- 公開リポジトリ：https://github.com/53able/algomatic-tech-blog-desktop
v1.0.0 Release: https://github.com/53able/algomatic-tech-blog-desktop/releases/tag/v1.0.0
- LICENSE-NOTE.md: https://github.com/53able/algomatic-tech-blog-desktop/blob/main/LICENSE-NOTE.md
- Pake LICENSE-EXCEPTION: https://github.com/tw93/Pake/blob/main/LICENSE-EXCEPTION
- Electron: 10 years of Electron: https://electronjs.org/blog/10-years-of-electron
- Tauri: What is Tauri?: https://v2.tauri.app/start/
原文を表示
こんにちは。AlgomaticでソフトウェアエンジニアをしているGo（@53able）です。
今回は、Algomaticのテックブログ https://tech.algomatic.jp/ を、Algomatic Tech Blog というmacOS向けデスクトップアプリにしました。先に成果物を置いておくと、macOS arm64向けのzipはGitHub Releasesからダウンロードできます。
- v1.0.0 Release: https://github.com/53able/algomatic-tech-blog-desktop/releases/tag/v1.0.0
使ったのはPakeです。Pakeは、WebページをTauriベースのデスクトップアプリとしてパッケージ化するCLIです。READMEでは、macOS / Windows / Linuxに対応した軽量なデスクトップアプリ生成ツールとして説明されています（tw93/Pake README）。
- はじめに
- Pakeで何を作れるのか
- まずmacOS arm64版に絞った理由
- .app を生成したコマンド
- 成果物をGitHubへ公開する形にまとめる
- ビルド結果と検証
- リポジトリとReleaseを公開する
- WindowsとLinuxのビルドはGitHub Actionsに逃がす
- ライセンス注記はREADMEから切り出した
- iframe拒否ヘッダがあってもビルドは通った
- URLから配布用アプリまで持っていけた
- エンジニアを募集しています！
- 参考リンク
はじめに
今回の出発点は、「自社テックブログを、ブラウザで開くWebページではなく、単独で起動できるアプリとして扱えるか」を試すことでした。テックブログは、採用、技術広報、社内外への知見共有を担うメディアです。一方で、日常的にはブラウザのタブの1つとして埋もれやすく、アプリケーションとしての存在感は弱くなります。今回扱った課題は、この埋もれやすいWebメディアを、単独で起動できる成果物として切り出せるかどうかでした。
そこで、既存サイトを作り替えずに、デスクトップアプリとして切り出せるかを確認しました。目的は、新しいCMSやフロントエンドを作ることではありません。すでにあるテックブログをPakeで包み、成果物として配布できる形にできるかを見ることです。
やったことは大きく3つです。
- 対象URLをPake CLIでmacOSアプリ化する
- 生成された .app をzip化し、成果物として残す
- バイナリ形式、Info.plist、署名検証を確認する
加えて、Windows / Linux向けにGitHub Actionsのビルド定義を用意し、成果物をGitHubの新規リポジトリで公開しました。
Web技術でデスクトップアプリを作る流れには、長い前史があります。代表例であるElectronは、GitHubのAtom editorを支えるために作られたAtom Shellを起点としています。Electron公式ブログでは、最初のcommitが2013年3月13日だったこと、Atomのpublic betaが2014年4月に公開されたことが振り返られています（10 years of Electron）。
Electronは、HTML / CSS / JavaScriptでデスクトップアプリを作る選択肢を広げました。一方で、ChromiumとNode.jsを同梱する構造上、配布サイズやメモリ使用量が大きくなりやすい面もあります。
Tauriはこの文脈で、OSのネイティブWebViewを使い、Rust側でデスクトップ機能を扱う設計を採ります。Tauri公式ドキュメントでも、任意のフロントエンドをHTML / JavaScript / CSSとして組み込み、システムのネイティブWebViewを使うことで小さなバンドルを作れると説明されています（What is Tauri?）。
Pakeは、そのTauriの上に「URLを渡してアプリ化する」操作を載せたツールです。今回の作業は、Electron以降の「Webをデスクトップへ持ち込む」流れを、Webサイト単位で試した小さな例になります。
まずmacOS arm64版に絞った理由
最初に決めたのは、対象を https://tech.algomatic.jp/ に絞ることでした。新しくランディングページを作るのではなく、すでに公開されているテックブログをそのままアプリ化します。
次に、アプリ名を Algomatic Tech Blog とし、まずmacOS arm64向けの .app を作る方針にしました。PakeはWindows / Linux向けのビルドにも対応していますが、最初から全OSの成果物を同時に揃えるよりも、まず1つのOSで「Webサイトをアプリ化できる」「成果物として確認できる」状態を作る方が早いと判断しました。
そのため、ローカルではmacOS版を作り、Windows / Linux向けにはGitHub Actionsのworkflowを用意する形にしました。
.app を生成したコマンド
ローカル環境では、次のコマンドでmacOS用の .app を作りました。
PAKE_CREATE_APP=1 npx pake-cli@3.11.10 https://tech.algomatic.jp/ \
--name "Algomatic Tech Blog" \
--title "Algomatic Tech Blog" \
--width 1440 \
--height 900 \
--min-width 900 \
--min-height 600 \
--enable-find \
--app-version 1.0.0PAKE_CREATE_APP=1 は、macOSで .app バンドルを作るために指定しました。PakeのCLIドキュメントでも、macOSでは通常DMGが作られ、テスト用に .app を作る場合は PAKE_CREATE_APP=1 を使うと説明されています（Pake CLI Usage Guide）。
成果物をGitHubへ公開する形にまとめる
生成した .app は、公開用の作業ディレクトリにまとめました。
./algomatic-tech-desktop/
├── Algomatic Tech Blog.app
├── Algomatic Tech Blog-macOS-arm64.app.zip
├── README.md
├── LICENSE-NOTE.md
└── .github/workflows/build-pake.ymlREADME.md には再ビルド用のコマンドを、LICENSE-NOTE.md にはPake Output Exceptionとブランド資産に関する注記を残しています。
ビルド結果と検証
Pakeのビルドは成功し、macOS arm64向けのzipは約6MBになりました。
✔ Build success!
✔ App installer located in ./algomatic-tech-desktop/Algomatic Tech Blog.app生成後は、file、Info.plist、codesign で最低限の確認をしました。
file 'Algomatic Tech Blog.app/Contents/MacOS/pake-algomatictechblog'
plutil -p 'Algomatic Tech Blog.app/Contents/Info.plist'
codesign --verify --deep --strict 'Algomatic Tech Blog.app'確認できた内容は次の通りです。
Mach-O 64-bit executable arm64
CFBundleIdentifier => com.pake.a2a258c
CFBundleName => Algomatic Tech Blog
CFBundleShortVersionString => 1.0.0
codesign verify: okリポジトリとReleaseを公開する
作成した成果物は、GitHubのpublicリポジトリで公開しました。
macOS arm64向けのzipは、v1.0.0 のRelease assetとしてアップロードしています。
WindowsとLinuxのビルドはGitHub Actionsに逃がす
ローカルではmacOS版を作成し、Windows / Linux向けにはGitHub Actionsのworkflowを用意しました。
作成したファイルは次の場所です。
./algomatic-tech-desktop/.github/workflows/build-pake.ymlworkflowでは、次の3つのrunnerを使う構成にしました。
strategy:
fail-fast: false
matrix:
include:
- os: macos-latest
targets: universal
artifact_name: algomatic-tech-blog-macos
- os: windows-latest
targets: x64
artifact_name: algomatic-tech-blog-windows-x64
- os: ubuntu-22.04
targets: deb,appimage
artifact_name: algomatic-tech-blog-linux-x64
Linux runnerには、Pake/Tauriで必要になる依存関係も追加しています。
sudo apt-get install -y \
libwebkit2gtk-4.1-dev \
build-essential \
curl \
wget \
file \
libxdo-dev \
libssl-dev \
libayatana-appindicator3-dev \
librsvg2-dev \
patchelfPake公式にも、GitHub Actionsでオンラインビルドする手順が用意されています（Pake GitHub Actions Usage Guide）。今回はその考え方に合わせて、OSごとにrunnerを分ける構成にしました。
ライセンス注記はREADMEから切り出した
Pake本体はGPLv3ですが、Pakeには「Pake Output Exception」があります。この例外では、標準のPakeビルド・パッケージプロセスで生成した対象アプリケーションは、Pake由来部分を含むことだけを理由に成果物全体がGPLv3になるわけではなく、任意のライセンス条件で配布できると説明されています（Pake LICENSE-EXCEPTION）。
今回はPake本体を改変して配布しているわけではありません。Pake CLIで生成したアプリ成果物とビルド手順を公開しています。ただし、Webサイト本文、ロゴ、アイコン、商標、ブランド資産の権利はPakeのライセンスとは別です。
そのため、公開リポジトリには LICENSE-NOTE.md を別ファイルとして追加しました。READMEからも、このファイルへリンクしています。注記した内容は次の通りです。
- Pake本体はGPLv3 + Pake Output Exceptionであること
- 生成アプリはPake Outputとして配布していること
- Pake本体の改変版を再配布しているわけではないこと
- Webサイトのコンテンツ、ロゴ、商標、アイコン、ブランド資産は各権利者に帰属すること
- このリポジトリは生成アプリ成果物とビルド手順の公開であり、元サイトのコンテンツやブランド資産の二次利用許諾ではないこと
iframe拒否ヘッダがあってもビルドは通った
対象サイト https://tech.algomatic.jp/ には、次のレスポンスヘッダがありました。
content-security-policy: frame-ancestors 'none'; upgrade-insecure-requests
x-frame-options: DENYこれはiframe埋め込みを拒否する設定です。詳細な影響分析までは行っていませんが、今回のPakeビルド自体は成功しました。
URLから配布用アプリまで持っていけた
Pakeを使って https://tech.algomatic.jp/ をmacOS向けデスクトップアプリに変換しました。
得られた成果は次の通りです。
項目
結果
macOS arm64 .app 生成
成功
macOS app zip作成
成功
バイナリ形式確認
Mach-O 64-bit executable arm64
Info.plist 確認
アプリ名・バージョンを確認
codesign --verify --deep --strict
成功
Windows / Linux用CI定義
作成済み
GitHubリポジトリ公開
完了
Release asset登録
完了
LICENSE-NOTE.md 追加
完了
Web技術をデスクトップへ持ち込む流れは、Electron、Tauri、Pakeへと形を変えて続いています。今回の約6MBのzip成果物は、その流れを小さく確認できる結果になりました。さらに、GitHubリポジトリとRelease、ライセンス注記まで用意したことで、他の人が成果物と前提条件にアクセスできる状態まで持っていけました。
エンジニアを募集しています！
ここまで読んでいただきありがとうございました！
Algomatic では、「AI革命で人々を幸せにする」をミッションに、変化の速い領域でも 学びや試行錯誤を続けられる エンジニアを募集しています。
もし少しでもご興味をお持ちいただけましたら、カジュアル面談に足を運んでいただけるとうれしいです！
参考リンク
- Pake README: https://github.com/tw93/Pake
- Pake CLI Usage Guide: https://github.com/tw93/Pake/blob/main/docs/cli-usage.md
- Pake GitHub Actions Usage Guide: https://github.com/tw93/Pake/blob/main/docs/github-actions-usage.md
- 公開リポジトリ: https://github.com/53able/algomatic-tech-blog-desktop
v1.0.0 Release: https://github.com/53able/algomatic-tech-blog-desktop/releases/tag/v1.0.0
- LICENSE-NOTE.md: https://github.com/53able/algomatic-tech-blog-desktop/blob/main/LICENSE-NOTE.md
- Pake LICENSE-EXCEPTION: https://github.com/tw93/Pake/blob/main/LICENSE-EXCEPTION
- Electron: 10 years of Electron: https://electronjs.org/blog/10-years-of-electron
- Tauri: What is Tauri?: https://v2.tauri.app/start/
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み