[{"data":1,"prerenderedAt":477},["ShallowReactive",2],{"news-item-\u002Fja\u002Fnews\u002Fgcp-webservice-laravel-1":3},{"id":4,"title":5,"body":6,"category":464,"created by":465,"date":466,"description":467,"extension":468,"meta":469,"navigation":470,"path":471,"sections":472,"seo":473,"stem":474,"thumbnail":475,"__hash__":476},"content_ja\u002Fja\u002Fnews\u002Fgcp-webservice-laravel-1.md","GCPを使ったLARAVEL開発  - Part 1",{"type":7,"value":8,"toc":456},"minimark",[9,14,18,22,25,29,38,55,65,71,75,81,85,91,94,123,127,139,141,186,192,197,203,210,215,220,234,247,251,262,273,277,290,304,309,319,329,339,343,352,355,359,370,374,377,381,384,387,390,396,400,411,415,422,426,429,433,436,440,443,447,450],[10,11,13],"h2",{"id":12},"igcpとは","I. GCPとは",[15,16,17],"p",{},"GCPとはGoogle Cloud Platform（グーグル・クラウド・プラットフォーム）の略称をいい、Googleが提供する、Google検索やYouTubeなどのエンドユーザー向けのサービスにGoogle社内で使われているものと同じインフラを使用したクラウドコンピューティングサービス群です。それらに加えてコンピューティング、ストレージ、データ解析、マシンラーニングといったモジュラー・クラウド・サービスをも提供します。申し込みのため、クレジットカードまたは銀行口座を求められます。 GCPは、サービスとしてインフラ、プラットフォーム、サーバーレスコンピューティング環境を提供します。",[10,19,21],{"id":20},"ii-laravelフレームワーク","II. Laravelフレームワーク",[15,23,24],{},"Laravel は、Taylor Otwellによって作成された、Symfonyをベースにしたモデル・ビュー・コントローラー（MVC）のWebアプリケーション開発用の無料・オープンソースのPHPで書かれたWebアプリケーションフレームワークです。Laravelのいくつかの機能としては、専用管理ツールに依存するモジュラー・パッケージがあります。データベースへのアクセス方法が色々あります。また、アプリケーションの開発・保守をサポートするユーティリティも、シンタックスシュガーという糖衣構文の補助機能もあります。 LaravelソースコードはGitHubにホスティングされ、MITライセンスの下でリリースされています。",[10,26,28],{"id":27},"iii-gcpでのlaravelインストール","III. GCPでのLaravelインストール",[15,30,31,32],{},"GAE（Google App Engine）でLaravelを実行する前、新たにGCPプロジェクトを作成する必要があります。 以下のリンクにアクセスしてGCPコンソールにログインします。 ",[33,34,35],"a",{"href":35,"rel":36},"https:\u002F\u002Fconsole.cloud.google.com\u002F",[37],"nofollow",[15,39,40,44,45,50,51,54],{},[41,42,43],"strong",{},"ステップ１:"," AGCPにログインした後、",[33,46,49],{"href":47,"rel":48},"https:\u002F\u002Fconsole.cloud.google.com\u002Fproject",[37],"Google Cloud Platform Console","でプロジェクトを作成します。",[41,52,53],{},"「CREATE PROJECT」"," をクリックします。",[56,57],"img",{"className":58,"alt":62,"src":63,"style":64},[59,60,61],"block","mx-auto","mb-4","","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164017\u002FScreen-Shot-0032-03-17-at-15.44.33.png","width: 100%;",[15,66,67,70],{},[41,68,69],{},"ステップ２："," 新たにGCPプロジェクトを作成します。",[56,72],{"className":73,"alt":62,"src":74,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164143\u002FScreen-Shot-0032-03-17-at-15.02.00.png",[15,76,77,80],{},[41,78,79],{},"ステップ３："," 新たに作成したプロジェクトのダッシュボードです。",[56,82],{"className":83,"alt":62,"src":84,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164617\u002FScreen-Shot-0032-03-17-at-15.07.03.png",[15,86,87,90],{},[41,88,89],{},"ステップ４："," Laravelフレームワークで新たにプロジェクトを作成します。",[15,92,93],{},"ターミナルを開いて下記のコマンドを実行します。",[95,96,97,105,111],"ul",{},[98,99,100,101],"li",{},"composerで新たにプロジェクト（gcp-webサービス）を作成する： ",[102,103,104],"code",{},"composer create-project --prefer-dist laravel\u002Flaravel gcp-webservices",[98,106,107,108],{},"Laravelソースディレクトリへの移動 ",[102,109,110],{},"cd gcp-webservices",[98,112,113,114,117,118,122],{},"localhost起動： ",[102,115,116],{},"php artisan serve"," ブラウザで、 ",[33,119,120],{"href":120,"rel":121},"http:\u002F\u002Flocalhost:8000\u002F",[37],"　にアクセスしてください。 composer create-project --prefer-dist laravel\u002Flaravel gcp-webservices",[56,124],{"className":125,"alt":62,"src":126,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164641\u002FScreen-Shot-0032-03-17-at-15.20.17.png",[15,128,129,132,133,138],{},[41,130,131],{},"ステップ５："," ",[33,134,137],{"href":135,"rel":136},"https:\u002F\u002Fdl.google.com\u002Fdl\u002Fcloudsdk\u002Fchannels\u002Frapid\u002Fdownloads\u002Fgoogle-cloud-sdk-283.0.0-darwin-x86_64.tar.gz",[37],"Google Cloud SDK"," (for MAC OS 64bit)をインストールし初期化します。",[15,140,93],{},[95,142,143,149,155,171,177,183],{},[98,144,145,146],{},"ダウンロードディレクトリへの移動： ",[102,147,148],{},"cd google-cloud-sdk",[98,150,151,152],{},"Google Cloud SDKインストール：",[102,153,154],{},".\u002Finstall.sh",[98,156,157,158,132,161,164,165,132,168],{},"GCPへのログイン： ",[102,159,160],{},"gcloud auth login",[102,162,163],{},"gcloud","コマンドラインが見付からない場合、下記のコマンドを追加してください。 ",[102,166,167],{},"source \"\u002Fgoogle-cloud-sdk\u002Fcompletion.bash.inc\"",[102,169,170],{},"source \"\u002Fgoogle-cloud-sdk\u002F\u002Fpath.bash.inc\"",[98,172,173,174],{},"GCPのプロジェクト一覧を表示： ",[102,175,176],{},"gcloud projects list",[98,178,179,180],{},"gcp-webserviceプロジェクトへの接続：",[102,181,182],{},"gcloud config set project gcp-webservices",[98,184,185],{},"デプロイ",[15,187,188,189],{},"1. 以下のようにapp.yamlファイルを作成します。 ",[102,190,191],{},"runtime: php72 env_variables: ## Put production environment variables here. APP_KEY: YOUR_APP_KEY APP_STORAGE: \u002Ftmp VIEW_COMPILED_PATH: \u002Ftmp SESSION_DRIVER: cookie",[15,193,194,195],{},"2. Laravelソースディレクトリに移動します。 ",[102,196,110],{},[15,198,199,200],{},"3. app.yamlのYOUR_APP_KEYを以下のコマンドを実行して取得したキーに変更します。 ",[102,201,202],{},"php artisan key:generate --show",[15,204,205,206,209],{},"4. 以下のソースコードをreturnコマンドの上に追加することで",[102,207,208],{},"bootstrap\u002Fapp.php","を変更できます。 これにより、本番環境でのキャッシュのためストレージパスを\u002F tmpに設定できます。",[15,211,212],{},[102,213,214],{},"# [START] Add the following block to `bootstrap\u002Fapp.php` \u002F* |-------------------------------------------------------------------------- | Set Storage Path |-------------------------------------------------------------------------- | | This script allows you to override the default storage location used by | the  application.  You may set the APP_STORAGE environment variable | in your .env file,  if not set the default location will be used | *\u002F $app->useStoragePath(env('APP_STORAGE', base_path() . '\u002Fstorage')); # [END]",[15,216,217,218],{},"5. Laravelソースディレクターに移動します。 ",[102,219,110],{},[15,221,222,223,226,227,230,231],{},"6. ",[102,224,225],{},"beyondcode\u002Flaravel-dump-server","を実行してComposer依存関係を削除します。 これは、Laravelのキャッシュによって",[102,228,229],{},"bootstrap\u002Fcache\u002Fservices.php","で発生されるエラーの対応です。 ",[102,232,233],{},"composer remove --dev beyondcode\u002Flaravel-dump-server",[15,235,236,237,240,241,246],{},"7. ",[41,238,239],{},"Cloud Build API","を",[33,242,245],{"href":243,"rel":244},"https:\u002F\u002Fconsole.developers.google.com\u002Fapis\u002Fapi\u002Fcloudbuild.googleapis.com\u002Foverview?project=gcp-webservices",[37],"こちら","で有効にします。",[56,248],{"className":249,"alt":62,"src":250,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25164734\u002Fenable_cloud_build.png",[15,252,253,254,257,258,261],{},"8. 下記のコマンドを実行してアプリをデプロイします。 ",[102,255,256],{},"gcloud app deploy --version develop","（「develop」はデプロイする最初版です） 最初のデプロイ時にcomposer.lockファイルを",[41,259,260],{},"削除","する必要があります。 その後、composer.lock を.gcloudignoreファイルに追加してください。",[15,263,264,265,268,269],{},"9. ",[102,266,267],{},"http:\u002F\u002FYOUR\\_PROJECT\\_ID.appspot.com"," にアクセスしてLaravelのWelcomeページを確認します。 YOUR_PROJECT_IDをGCPプロジェクトIDに変更しましょう！ 例：",[33,270,271],{"href":271,"rel":272},"https:\u002F\u002Fgcp-webservices.appspot.com\u002F",[37],[10,274,276],{"id":275},"iv-google-visionapi","IV. 「Google Vision」API",[15,278,279,282,283,286,287],{},[41,280,281],{},"ステップ1",": 以下のコマンドで ",[41,284,285],{},"「Google Vision」API"," をインストールします。 ",[102,288,289],{},"composer require wapnen\u002Fgoogle-cloud-vision-php",[15,291,292,295,296,299,300],{},[41,293,294],{},"ステップ2",": 以下のURLの説明に従って ",[41,297,298],{},"service account key","を作成します。",[33,301,302],{"href":302,"rel":303},"https:\u002F\u002Fcloud.google.com\u002Fvision\u002Fdocs\u002Fbefore-you-begin",[37],[56,305],{"className":306,"alt":62,"src":307,"style":308},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165223\u002Fcreate_service_account_key.png","width: 50%;",[15,310,311,314,315,318],{},[41,312,313],{},"Service account"," リストから",[41,316,317],{},"New service account","を選択します。",[15,320,321,324,325,328],{},[41,322,323],{},"「Service account name」"," 項目に名前を入力します。（この例で",[41,326,327],{},"test","を入力します。",[15,330,331,332,335,336],{},"それから ",[41,333,334],{},"「Create」"," をクリックすると.jsonファイルがダウンロードされます。",[41,337,338],{},"このファイルを厳密に保管・管理しなければなりません。若し、他人はこのファイルを手に入れたら、このファイルで彼らの個人的なサービスを利用できますが、その費用を負担するのはあなたです。",[10,340,342],{"id":341},"v-google-visionapi利用による画像からのテキスト検出抽出","V. 「Google Vision」API利用による画像からのテキスト検出・抽出",[15,344,345,346,351],{},"関連資料は",[33,347,350],{"href":348,"rel":349},"https:\u002F\u002Fcloud.google.com\u002Fvision\u002Fdocs\u002Focr#vision_text_detection-php",[37],"google-vision-php","ホームページで参照できます。",[15,353,354],{},"いくつかのコードでは、簡単に実装できます。",[56,356],{"className":357,"alt":62,"src":358,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165651\u002Fvision_php_1.png",[15,360,361,362,365,366,369],{},"key_pathを使って.envファイルを、",[41,363,364],{},"IV"," で生成したkey.jsonファイルのパスへマウントするための環境変数として作成します。 この例にてkey.jsonファイルを ",[41,367,368],{},"「google-credential」"," フォルダーに保存し、それを案件のルートディレクトリに置きました。",[56,371],{"className":372,"alt":62,"src":373,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165823\u002Fkey_path.png",[15,375,376],{},"そして.envファイルに以下のものが入ります。",[56,378],{"className":379,"alt":62,"src":380,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165845\u002Fenv_exam.png",[15,382,383],{},"以下の二つの処理を行うコントローラーを作成します。",[15,385,386],{},"1. リクエストからアップロードされた画像を取得すること。",[15,388,389],{},"2. 上記のソースコードを使うことでVision APIから返却されたテキストを表示させること。",[15,391,392,395],{},[41,393,394],{},"annotateImage","()関数だけを含まれる「AnnotationController」コントローラーを作成します。その中に以下のソースコードが入ります。",[56,397],{"className":398,"alt":62,"src":399,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25165923\u002Fvision_php_1-1.png",[15,401,402,403,410],{},"画像をアップロードする ",[41,404,405,406,409],{},"「Upload image」",[41,407,408],{},"ボタン、","「Convert」"," ボタンが入っている簡単なプログラムを作りました。",[56,412],{"className":413,"alt":62,"src":414,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170108\u002Fsample_template.png",[15,416,417,418,421],{},"上記画像を選択して「Convert」ボタンを押下したら「Google Vision」が ",[41,419,420],{},"「Upload image」や 「Choose File」"," の文字列を検出・抽出できるかどうかを確認しましょう！",[56,423],{"className":424,"alt":62,"src":425,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170134\u002Fchoose_file.png",[15,427,428],{},"では、結果を確認しましょう。",[56,430],{"className":431,"alt":62,"src":432,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170200\u002Fvision_result.png",[15,434,435],{},"すごい！正しいですね。では、今日本語テキスト画像で試しましょう！ 日本語ニュースのスクリーンショットを撮って試しましょう！",[56,437],{"className":438,"alt":62,"src":439,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170237\u002Fjapanese_news.png",[15,441,442],{},"結果、どうでしょうか。",[56,444],{"className":445,"alt":62,"src":446,"style":64},[59,60,61],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F25170306\u002Fjapan_result.png",[15,448,449],{},"素晴らしいよね！",[15,451,452],{},[33,453,455],{"href":454},"gcp-webservice-laravel-2","Part2に続く",{"title":62,"searchDepth":457,"depth":457,"links":458},2,[459,460,461,462,463],{"id":12,"depth":457,"text":13},{"id":20,"depth":457,"text":21},{"id":27,"depth":457,"text":28},{"id":275,"depth":457,"text":276},{"id":341,"depth":457,"text":342},"tech talk","Briswell Vietnam Co Ltd","2020-05-29","I. GCPとは GCPとはGoogle Cloud Platform（グーグル・クラウド・プラットフォーム）の略称をいい、Googleが提供する、Google検索やYouTubeなどのエンドユーザー向けのサービスにGoogle社内で使われているものと同じインフラを使用したクラウドコンピューティングサービス群です。それらに加えてコンピューティング、ストレージ、データ解析、マシンラーニングといったモジュラー・クラウド・サービスをも提供します。申し込みのため、クレジットカードまたは銀行口座を求められます。 GCPは、サービスとしてインフラ、プラットフォーム、サーバーレスコンピューティング環境を提供します。","md",{},true,"\u002Fja\u002Fnews\u002Fgcp-webservice-laravel-1",null,{"title":5,"description":467},"ja\u002Fnews\u002Fgcp-webservice-laravel-1","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F05\u002F19163201\u002F0_brH9cM9rnSRx2I-S.png","ekLN98D2BVa005S-CJUlMs-3A4af6emLuhsx3PJuils",1785320530576]