<p>こんにちは。もぐめっとです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e4u5jcaq01fdevn19w92oj8kah2k" alt loading="lazy" class="md-img"></p>
<p>プレビューが斜め回転とかできないので顔がほぼ隠れちゃいます。</p>
<p>本日は最後のextensionである<a href="https://github.com/FirebaseExtended/experimental-extensions/blob/next/storage-extract-image-text#image-text-extraction" target="_blank" rel="nofollow noopener noreferrer">Image Text Extraction</a>について紹介させていただきます。</p>
<p>名前から分かる通り、画像からテキストを抽出できます！<br>
これは結構使えるようなExtensionな匂いがします。</p>
<h2 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h2>
<p>firebaseコンソールからstorageのバケットを作成しておきましょう。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/cyylls8psoknvst2agupu759p7i3" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95" aria-hidden="true"></a> インストール方法</h2>
<p>いつもどおりボタンでインストールします<br>
<img src="https://storage.googleapis.com/zenn-user-upload/6ezwq9x5drrjsw6f5to9ubru786u" alt loading="lazy" class="md-img"></p>
<p>CLIの場合はこちら</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">firebase ext:install storage-extract-image-text <span class="token parameter variable">--project</span><span class="token operator">=</span><span class="token operator">&lt;</span>your-project-id<span class="token operator">&gt;</span>
</code></pre></div><p>インストールする対象プロジェクトを選択<br>
<img src="https://storage.googleapis.com/zenn-user-upload/73r0l52gpuou20zb3mpzxmqtcshw" alt loading="lazy" class="md-img"></p>
<p>確認しました<br>
<img src="https://storage.googleapis.com/zenn-user-upload/irc44u7o1a3unqpw742c8qn2sh0j" alt loading="lazy" class="md-img"></p>
<p>次へ<br>
<img src="https://storage.googleapis.com/zenn-user-upload/mz1eqaemgkt9856vzq4oidcrymvx" alt loading="lazy" class="md-img"></p>
<p>次へ<br>
<img src="https://storage.googleapis.com/zenn-user-upload/76f6lydysgs7yl24rj00crku1at2" alt loading="lazy" class="md-img"></p>
<p>次へ<br>
<img src="https://storage.googleapis.com/zenn-user-upload/amc5qaknuycvmj203cmchom9p8gn" alt loading="lazy" class="md-img"></p>
<p>下記を入力して「拡張機能をインストール」</p>
<div class="code-block-container"><pre><code>Cloud Functions location: CFが動く場所。Tokyoにしておきましょう。
Cloud Storage bucket for images: 最初に作ったstorage bucketを選択
Collection path: 解析結果が置かれるcollectionPathを指定します
</code></pre></div><p><img src="https://storage.googleapis.com/zenn-user-upload/q0hb987t6oex35slo9wsccuefstp" alt loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/id7fvtgr2quknukx0nw8wz4deu27" alt loading="lazy" class="md-img"></p>
<p>インストールが終わるのを待ちます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/uq9q3f8q6y4lyu5lkh70icxzxfkx" alt loading="lazy" class="md-img"></p>
<p>無事インストールが終わったら早速試してみましょう<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2hqy7sscbmy81cv0fzi6hktyqa3v" alt loading="lazy" class="md-img"></p>
<h2 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h2>
<p>この画像を試しに使ってみます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--u_afbZea--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://play-lh.googleusercontent.com/6T4CWWroATYdURM82sESZh2V-xrQ93MYAIMu7uCt4F4EaoNPZIIj3jAcNjluuKiEqwU%3Dw1440-h620-rw" alt loading="lazy" class="md-img"></p>
<p>storageからアップロードします<br>
<img src="https://storage.googleapis.com/zenn-user-upload/azicbqm6r5w8v1zm2syxke332bad" alt loading="lazy" class="md-img"></p>
<p>しばらくすると解析された結果が入ってきました。ちょっと読みづらい文字だったかな？<br>
<img src="https://storage.googleapis.com/zenn-user-upload/sng3q5zsayl81o8flr8a411qkv7x" alt loading="lazy" class="md-img"></p>
<p>次はもう少しはっきりした文字体のやつをやってみます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/k1366asw5bx4jfcjcbdkb35t4ab2" alt loading="lazy" class="md-img"></p>
<p>変なフォントでなければ大丈夫そうですね！<br>
<img src="https://storage.googleapis.com/zenn-user-upload/v5nt54qy9g6n5ma06rswq78a4bjf" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>しっかりくっきりした文字であればある程度画像から文字列を取得できることがわかりました！<br>
画像からテキスト起こしサービスとか簡単に作れちゃいそうですね。</p>
<h2 id="%E3%81%8A%E3%81%BE%E3%81%91">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h2>
<p>最初こんなエラーが出てインストールが完了しなかったんですけど、</p>
<div class="code-block-container"><pre><code>{"@type":"type.googleapis.com/google.cloud.audit.AuditLog","status":{"code":3,"message":"Build failed: lib/index.js does not exist; Error ID: bc73f5cd"},"authenticationInfo":{"principalEmail":"393438733669@cloudservices.gserviceaccount.com"},"serviceName":"cloudfunctions.googleapis.com","methodName":"google.cloud.functions.v1.CloudFunctionsService.UpdateFunction","resourceName":"projects/test-afdc2/locations/asia-northeast1/functions/ext-storage-extract-image-text-extractText"} 
</code></pre></div><p><a href="https://github.com/FirebaseExtended/experimental-extensions/issues/37" target="_blank" rel="nofollow noopener noreferrer">issue</a>で必要ファイルないみたいだよーといったら親切な方が必要ファイル入れてくれました。</p>
<p>しかし、自分でPR作っちゃえばよかった・・・contributionになるチャンスを逃した・・・</p>
<h2 id="%E5%AE%A3%E4%BC%9D">
<a class="header-anchor-link" href="#%E5%AE%A3%E4%BC%9D" aria-hidden="true"></a> 宣伝</h2>
<p>こんなサービス作ってるのでよかったら使ってみてください！</p>
<p><a href="https://werewolf.mogmet.com" target="_blank" rel="nofollow noopener noreferrer">ワンナイト人狼 for mobile</a><br>
<a href="https://online.1nite-jinro.com/link/blog" target="_blank" rel="nofollow noopener noreferrer">ワンナイト人狼オンライン</a>（ガッツリfirebase使ってます。）<br>
<a href="https://camecon.me" target="_blank" rel="nofollow noopener noreferrer">気軽に投稿できるフォトコンサイト - Camecon</a><br>
<a href="https://offcha.com/" target="_blank" rel="nofollow noopener noreferrer">連絡先を交換しなくてもグルチャができる - Offcha</a></p>


Image Text ExtractionというFirebase Extensionsを試してみた

Discussion