<p data-line="0" class="code-line">「Capacitorを使うと、Webアプリをネイティブアプリ化でき、ネイティブアプリでしか利用できないAPIやSDKが使えるようになる」という説明をよくします。そして、Capacitorプラグインの一覧ってどこでみれるの？と聞かれると、大体以下のURLを案内します。</p>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d54e14067b8c1" src="https://embed.zenn.studio/card#zenn-embedded__d54e14067b8c1" data-content="https%3A%2F%2Fgithub.com%2Fcapawesome-team%2Fawesome-capacitorjs" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/capawesome-team/awesome-capacitorjs" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/capawesome-team/awesome-capacitorjs</a></p>
<p data-line="4" class="code-line">このリポジトリは、Capacitorプラグインの一覧をまとめたリポジトリです。Capacitorプラグインの一覧をまとめたリポジトリは他にもありますが、このリポジトリは、Capacitor公式プラグインの一覧だけでなく、Capacitor Communityプラグインや、サードパーティのプラグインを確認することができます。</p>
<p data-line="6" class="code-line">とはいえ、これにプラスしてCapacitorはCordovaプラグインを使える機構もついてるので、メンテナンスされている/されていないを無視すれば1,000以上のプラグインが利用できます。そうなると「あれもできます、これもできます」とはじめての方にはとっつきにくいと思うので、私が管理してるアプリで採用しているCapacitor/Cordovaプラグインを、アプリ別にご紹介します。</p>
<h2 id="%E5%A5%B3%E5%8F%8B%E3%81%A0%E3%81%A1%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8B%E5%A5%B3%E6%80%A7%E5%B0%82%E7%94%A8%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%80%8Ctipsys%E3%80%8D" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E5%A5%B3%E5%8F%8B%E3%81%A0%E3%81%A1%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8B%E5%A5%B3%E6%80%A7%E5%B0%82%E7%94%A8%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%80%8Ctipsys%E3%80%8D" aria-hidden="true"></a> 女友だちとつながる女性専用ソーシャルサービス「tipsys」</h2>
<p data-line="10" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__bb575a3ef6533" src="https://embed.zenn.studio/card#zenn-embedded__bb575a3ef6533" data-content="https%3A%2F%2Fwww.tipsys.me%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.tipsys.me/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.tipsys.me/</a></p>
<table data-line="12" class="code-line">
<thead data-line="12" class="code-line">
<tr data-line="12" class="code-line">
<th>プラグイン名</th>
<th>概要</th>
</tr>
</thead>
<tbody data-line="14" class="code-line">
<tr data-line="14" class="code-line">
<td>@capacitor-community/admob</td>
<td>Google AdMob広告をだして収益を得る</td>
</tr>
<tr data-line="15" class="code-line">
<td>@capacitor-community/apple-sign-in</td>
<td>Apple Sign Inをネイティブで実装する</td>
</tr>
<tr data-line="16" class="code-line">
<td>@capacitor-community/facebook-login</td>
<td>Facebook Loginをネイティブで実装する</td>
</tr>
<tr data-line="17" class="code-line">
<td>@capacitor-community/firebase-analytics</td>
<td>Firebase Analyticsを使ってアクセス解析する</td>
</tr>
<tr data-line="18" class="code-line">
<td>@capacitor-community/in-app-review</td>
<td>アプリのレビューをユーザに促す</td>
</tr>
<tr data-line="19" class="code-line">
<td>@capacitor-community/stripe-identity</td>
<td>Stripe Identityを使って本人確認を実装する</td>
</tr>
<tr data-line="20" class="code-line">
<td>@capacitor/browser</td>
<td>アプリ内ブラウザを実装する</td>
</tr>
<tr data-line="21" class="code-line">
<td>@capacitor/camera</td>
<td>ネイティブのカメラを使って写真を撮る</td>
</tr>
<tr data-line="22" class="code-line">
<td>@capacitor/clipboard</td>
<td>文字列をクリップボードにコピーする</td>
</tr>
<tr data-line="23" class="code-line">
<td>@capacitor/device</td>
<td>デバイスのUUIDを取得する</td>
</tr>
<tr data-line="24" class="code-line">
<td>@capacitor/geolocation</td>
<td>デバイスの位置情報を取得する</td>
</tr>
<tr data-line="25" class="code-line">
<td>@capacitor/haptics</td>
<td>振動によるフィードバックを実装する</td>
</tr>
<tr data-line="26" class="code-line">
<td>@capacitor/keyboard</td>
<td>キーボードの表示/非表示のイベントを取得する</td>
</tr>
<tr data-line="27" class="code-line">
<td>@capacitor/network</td>
<td>オフライン状態の場合ユーザに通知する</td>
</tr>
<tr data-line="28" class="code-line">
<td>@capacitor/preferences</td>
<td>ネイティブストレージにデータを保存する</td>
</tr>
<tr data-line="29" class="code-line">
<td>@capacitor/push-notifications</td>
<td>プッシュ通知を実装する</td>
</tr>
<tr data-line="30" class="code-line">
<td>@capacitor/share</td>
<td>シェア機能を実装する</td>
</tr>
<tr data-line="31" class="code-line">
<td>@capacitor/splash-screen</td>
<td>スプラッシュスクリーンを実装する</td>
</tr>
<tr data-line="32" class="code-line">
<td>@capawesome/capacitor-badge</td>
<td>バッジを表示する</td>
</tr>
<tr data-line="33" class="code-line">
<td>@rdlabo/capacitor-screenshot-event</td>
<td>スクリーンショットイベントを取得する</td>
</tr>
<tr data-line="34" class="code-line">
<td>cordova-plugin-purchase</td>
<td>Cordovaプラグイン。ネイティブ決済に幅広く対応</td>
</tr>
</tbody>
</table>
<h2 id="%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E6%A5%AD%E5%8B%99%E7%94%A8%E3%83%AF%E3%82%A4%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8Cwinecode%E3%80%8D" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E6%A5%AD%E5%8B%99%E7%94%A8%E3%83%AF%E3%82%A4%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8Cwinecode%E3%80%8D" aria-hidden="true"></a> スマホで使える業務用ワイン管理アプリ「winecode」</h2>
<p data-line="38" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d456fb749f04d" src="https://embed.zenn.studio/card#zenn-embedded__d456fb749f04d" data-content="https%3A%2F%2Fsite.winecode.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://site.winecode.app/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://site.winecode.app/</a></p>
<div class="code-block-container"><pre><code class="code-line" data-line="40">重複分については割愛しています
</code></pre></div><table data-line="44" class="code-line">
<thead data-line="44" class="code-line">
<tr data-line="44" class="code-line">
<th>プラグイン名</th>
<th>概要</th>
</tr>
</thead>
<tbody data-line="46" class="code-line">
<tr data-line="46" class="code-line">
<td>@capacitor-mlkit/barcode-scanning</td>
<td>MLKitを使ってバーコード読み込み。高速。</td>
</tr>
<tr data-line="47" class="code-line">
<td>@rdlabo/capacitor-brotherprint</td>
<td>Brotherラベルプリンタでラベルを印刷する</td>
</tr>
<tr data-line="48" class="code-line">
<td>cordova-plugin-printer</td>
<td>Cordovaプラグイン。ページをそのまま印刷する</td>
</tr>
</tbody>
</table>
<h2 id="%E9%A3%9F%E5%93%81%E8%A1%A8%E7%A4%BA%E3%83%A9%E3%83%99%E3%83%AB%E3%82%92%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AB%E5%8D%B0%E5%88%B7%E3%80%8C%E9%A3%9F%E5%93%81%E8%A1%A8%E7%A4%BA%E5%8D%B0%E5%88%B7%E3%80%8D" data-line="50" class="code-line">
<a class="header-anchor-link" href="#%E9%A3%9F%E5%93%81%E8%A1%A8%E7%A4%BA%E3%83%A9%E3%83%99%E3%83%AB%E3%82%92%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AB%E5%8D%B0%E5%88%B7%E3%80%8C%E9%A3%9F%E5%93%81%E8%A1%A8%E7%A4%BA%E5%8D%B0%E5%88%B7%E3%80%8D" aria-hidden="true"></a> 食品表示ラベルをシンプルに印刷「食品表示印刷」</h2>
<p data-line="52" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a9db5d8db596e" src="https://embed.zenn.studio/card#zenn-embedded__a9db5d8db596e" data-content="https%3A%2F%2Ffoodlabel.rdlabo.jp%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://foodlabel.rdlabo.jp/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://foodlabel.rdlabo.jp/</a></p>
<p data-line="54" class="code-line">※ ここまでに紹介してるプラグインのみを利用</p>
<h2 id="%E6%9C%89%E9%99%90%E4%BC%9A%E7%A4%BE%E5%B0%8F%E7%94%B0%E5%95%86%E5%BA%97%E3%81%AE%E6%A5%AD%E5%8B%99%E5%9F%BA%E5%B9%B9%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" data-line="56" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%89%E9%99%90%E4%BC%9A%E7%A4%BE%E5%B0%8F%E7%94%B0%E5%95%86%E5%BA%97%E3%81%AE%E6%A5%AD%E5%8B%99%E5%9F%BA%E5%B9%B9%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" aria-hidden="true"></a> 有限会社小田商店の業務基幹システム</h2>
<p data-line="58" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__93abffdc4ccf9" src="https://embed.zenn.studio/card#zenn-embedded__93abffdc4ccf9" data-content="https%3A%2F%2Fodss.jp%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://odss.jp/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://odss.jp/</a></p>
<div class="code-block-container"><pre><code class="code-line" data-line="60">重複分については割愛しています
</code></pre></div><table data-line="64" class="code-line">
<thead data-line="64" class="code-line">
<tr data-line="64" class="code-line">
<th>プラグイン名</th>
<th>概要</th>
</tr>
</thead>
<tbody data-line="66" class="code-line">
<tr data-line="66" class="code-line">
<td>@rdlabo/capacitor-codescanner</td>
<td>業務に最適化したバーコード読み込み機能を実装する</td>
</tr>
</tbody>
</table>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="71" class="code-line">実際にCapacitorを用いてアプリ開発をしていると、多くの場合は「Webアプリで9割の価値は完結できる」「ただ、残り1割の価値はネイティブでしか提供できないし、それがアプリの最も大切なところになった」ということがあると思います。ぜひ、Webアプリで価値提供して次を考えている方は、ネイティブ機能を使うことで、もう一歩ユーザに価値が提供できないか検討してもらえると嬉しいです。</p>
<p data-line="73" class="code-line">それではまた。</p>


弊社が、Webアプリをモバイルアプリ化する「Capacitor」で実際にプロダクトで使ってるプラグイン一挙公開

女友だちとつながる女性専用ソーシャルサービス「tipsys」

スマホで使える業務用ワイン管理アプリ「winecode」

食品表示ラベルをシンプルに印刷「食品表示印刷」

有限会社小田商店の業務基幹システム

Discussion