信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    Flutterはじめました(4)

    久しぶりです。のりさんです。 Flutterも第4弾の投稿になります。【過去Flutter関連記事】・第1回:開発環境構築・第2回:デモアプリのソースコードについて・第3回:Assetsの画像表示 みなさん「ガワネイティブ」って聞いたことありますか。 外側はネイティブアプリで、中身はWebアプリ(サイト)といったアプリのことを指すようでハイブリットアプリとも言われているみたいですね。 AppStoreやGooglePlay等からインストールして利用するネイティブアプリですがアプリ開発ではWebブラウザの機能を持つWebViewというパーツがあったりします。 このWebViewを使えば、特定のWebサイトを画面に表示することができてさらにネイティブアプリとWebサイトを連携することも可能なようです。 ・ネイティブ側の処理からWebサイト上のJavascriptの呼び出し ・Webサイト上のJavascriptからネイティブ側の処理の呼び出し そしてFlutterでもWebViewが使えるようなので今回試してみたいと思います。 【開発環境】・Windows10・Android Studio ArcticFox 2020.3.1・Flutter 2.2.2今回も新しいFlutterプロジェクトを作成しデモアプリを修正していきます。利用するFlutterのWebViewはAndroidとiOSに対応しているようですが今回の新しいプロジェクトではAndroidで説明するためAndroidにチェックを入れて進めます。   ① プロジェクトの設定前回のassets設定で「pubspec.yaml」ファイルを修正しましたが今回はWebViewを利用するため、ここでパッケージを追加していきます。 dependenciesの下に「webview_flutter: ^2.0.13」を追記します。※2021年9月現在の最新バージョンは「2.0.13」です。追記したら、Pub getボタンを押してパッケージを追加しました。  ② Androidの最小APIレベル設定Androidの場合、今回のWebviewパッケージ利用の場合最小のAPIレベルを変更しないと動作しないようなので変更します。以下のAndroid/app/build.gradleを開きます。minSdkVersion 16となっているところを19に変更します  ③ 簡易ブラウザアプリの作成Webサイトをアプリで表示できるようにしていきたいと思います。 1.デモアプリのコメントの削除  すべてのコメント(//の行)を正規表現の置換処理で消して  コード整形(Win:Ctrl+Alt+L)しました。2.MyHomePageStateの修正  デモアプリのカウンター変数が定義されていますがそちらを削除して  WebView用のプロパティを書いておきます。   ※クラス名の後ろに?がついているのは「nullを許容します」という意味になります。   最近のFlutterバージョンだとDart言語がnull safetyになっています。 3.Android WebViewの日本語入力対応  初期化処理のinitStateメソッドを追加して  Androidの場合だけ「SurfaceAndroidWebView」を設定するように書きます。 4. 画面にWebViewを表示させる  Scaffoldを以下のように修正しました。  ・appBarに「戻る」「進む」ボタン(アイコン表示)  ・bodyにWebViewを表示する  ・右下の丸ボタンタップでJavascriptを実行  上記ソースのコメントにも少し書いてみましたが、以下の内容になります。  ●appBar   actions:タイトルバーの戻る進むボタン部分  ●WebView   initialUrl:最初に読み込むURL   JavascriptMode:WebViewでJavascriptが有効になるように設定   OnWebViewCreated:WebViewが生成されたタイミングで呼び出されるメソッド             (WebViewController(状態)をプロパティに設定)   OnPageStarted:ページ読み込み開始時に呼び出されるメソッド           (ここで「戻る」「進む」ボタンの状態をプロパティに設定)  ●floatingActionButton   onPressed:ここでevaluteJavascriptメソッドでJavascriptの実行 5.アプリ動作確認  ここまでの実装でアプリを起動してみたいと思います。    おお、表示されましたね!   リンクをタップしての画面遷移も問題ないようです。    画面遷移して戻ったりしたら「←」「→」ボタンが表示されました!  タップしての画面遷移も問題なさそうです。  次に右下の丸いボタンを押してみます。    おお!Javascriptが実行されましたね!  Javascriptが動作するのでサイト内のJQueryなども呼び出せそうですね。今回はWebViewを使ってアプリにWebサイトを表示するところまで実装してみました。Webアプリの開発が得意な人であれば、さくっとスマホアプリが作れてしまいそうですね!Javascript連携についてはまだまだなので、これからもっと試していきたいと思います。それではまた!

  • 画像:ブログサムネイル

    テクログ

    localで簡単WP環境

    ども!うがです!!ひょんなことからワードプレスを使う機会がありまして、、、、まずはローカル環境を作ろうかなと思ってた時に、超簡単でかつ無料で構築できるツールを発見したのでご紹介します!その名も「Local」!!インストールも簡単!まず公式からダウンロードします。https://localwp.com/この時に「OR DOWNLOAD FOR FREE」からダウンロードしてください(CREATE AN ACCOUNTではありません!)使用しているOSを選んで「WorkEmail」の部分だけ入れて「Get It Now!」をクリックするとダウンロードが開始されます。ここからは指示に従ってインストールするだけ!インストール出来たら立ち上げて、「CREATE A NEW SITE」をクリックまずはサイト名の入力画面が表示されるので、サイト名を入力してください次に環境設定をします。特に最新で良いのであれば「Preferred」を選択してください。選択欄のしたには作成するPHPのVersionとエンジン、DBのVersionが記載されています最後にワードプレスの管理画面にログインするためにID/PASSを入力すれば完成です!立ち上がったら「admin」を押すとおなじみのワードプレス管理画面のログイン画面に遷移するので先ほど決めたID/PASSを入力すれば管理画面に入れます!ねっ?かんたんでしょう?

  • テクログ

    【Laravel 8.x】API / Ajax のエラーレスポンスをJSONで返す

    どうも!先日恐竜科学博へ行き、少年の心を取り戻したわいです!いや~、良いですね。恐竜は。図鑑の隅々まで(※1)読み込んでいた幼少期を思い出しました。ずっと忘れていた恐竜への気持ちを蘇らせてくれたのは、バイリンガルニュースの恐竜くんの回でした。恐竜科学博もバイリンガルニュースも両方おもしろかったです。(※1)・・・ティラノサウルスのページのみ恐竜は化石というかたちで現代人に当時の情報を提供しますが、WebAPIでは一般的にJSONという形式でクライアントに情報を提供します。しかし、LaravelのデフォルトではエラーレスポンスをJSONで返してくれません。このままだと、クライアントがデバッグするのは、化石なしで恐竜の研究をするくらい難しいです。そういうことで、今回はLaravelでAPI / Ajax のエラーレスポンスをJSONで返す方法について書きたいと思います。(※2)(※2)・・・無理やり話をつなげた一つ目の方法は、$request->headers->set('Accept','application/json'); を追加して、APIのいかなるリクエストに対しても Accept:application/json を加えるという方法です。こうすることで、$request->expectsJson() が true になり、Illuminate\Foundation\Exceptions\Handler 内でエラーレスポンスをJSON形式で返してくれるようになります。しかし、この方法の場合、abort(404) をしたときなどに投げられる HttpException や内部エラーを返すときに、ファイル名などの膨大な情報がJSONに含まれてしまい、とてもキレイなエラーレスポンスとは言えません。(そもそも、ファイル名などはクライアントに教えたくないです)参考:Laravel APIで常にJSONをリクエストするミドルウェアというわけで、下記方法がオススメです。Illuminate\Foundation\Exceptions\Handler を継承している app\Exceptions\Handler.php(※3)を実装します。(※3)・・・このクラスは、Laravelのバージョンによって中身が微妙に違います。本記事はLaravel 8.x系です。<?php namespace App\Exceptions; use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler; use Illuminate\Http\Request; use Illuminate\Support\Facades\Log; use Illuminate\Validation\ValidationException; use Symfony\Component\HttpFoundation\Response as HttpResponse; use Throwable; class Handler extends ExceptionHandler { /**  * A list of the exception types that are not reported.  *  * @var array  */ protected $dontReport = [ // ]; /**  * A list of the inputs that are never flashed for validation exceptions.  *  * @var array  */ protected $dontFlash = [ 'current_password', 'password', 'password_confirmation', ]; /**  * Register the exception handling callbacks for the application.  *  * @return void  */ public function register() { $this->reportable(function (Throwable $e) { // }); $this->renderable(function (Throwable $e, Request $request) { if ($request->is('api/*') || $request->ajax()) { Log::error('[API Error] '.$request->method().': '.$request->fullUrl()); if ($this->isHttpException($e)) { $message = $e->getMessage() ?: HttpResponse::$statusTexts[$e->getStatusCode()]; Log::error($message); return response()->json([ 'message' => $message ], $e->getStatusCode()); } elseif ($e instanceof ValidationException) { Log::error($e->errors()); return $this->invalidJson($request, $e); } else { return response()->json([ 'message' => 'Internal Server Error' ], 500); } } }); } } 投げられたすべての例外がこのクラスを通ります。やっていることは下記です。・API / AJax リクエストの時だけ、例外処理のレンダーを変える・abort(401), abort(404, 'Record not found.') などの HttpException のエラーメッセージをJSONで返す・$request->validated()実行時のバリデーションエラーをJSONで返す(ここは、Illuminate\Foundation\Exceptions\Handlerの処理をそのまま使う)・内部エラーの場合、'Internal Server Error'というエラーメッセージをJSONで返す・HttpException, ValidationException はデフォルトでログを吐かないようになっているので、API / Ajaxのときはログを吐くようにするこれで、無事クライアントに理解しやすいエラーレスポンスを返すことができるようになりました。こんな感じで、恐竜も意図的に化石になる部分を決めていたらおもしろいですね。(※4)(※4)・・・おもしろくない以上、わいでした。健闘を祈る!!

  • テクログ

    めぐる式二分探索

    ▼はじめにみなさん、二分探索しているでしょうか。(?)二分探索とは、ソート済み配列に対する探索アルゴリズムの一つで、膨大なデータに対しても高速に動作するのが魅力ですよね。しかし、いざ二分探索をプログラムで書こうとすると、度々バグが発生したり、応用の仕方がわからなかったりといったことが起こります。(私は起こりました。)そこで、バグが起こりにくく、応用も簡単にできる、「めぐる式二分探索」というものをご紹介します。▼二分探索の応用その前に二分探索の応用のついてお話しします。二分探索には「ソート済み配列から目的の値を見つける」という使い方の他に、「ある条件を満たす範囲の最大値 or 最小値を見つける」ということもできます。例えば以下のような配列を考えます。1 2 3 4 7 8 9ここで「ある条件」を「値が6以上」と設定すると以下のように色分けをすることができます。1 2 3 4 7 8 9青い部分が「ある条件」を満たす範囲(値が6以上)で、赤い部分が「ある条件」を満たさない範囲(値が6未満)となります。後は二分探索を用いてこの境目を見つけることさえできれば、青い部分の最小値と赤い部分の最大値を見つけることができます。この例だと、値が6以上かつ最小の値は7、値が6未満かつ最大の値は4であることがわかります。これが二分探索の応用になります。▼めぐる式二分探索二分探索には様々な実装方法が存在するのですが、その中の一つが「めぐる式二分探索」になります。めぐる式二分探索を使用すると以下のようなメリットがあります。・バグが発生しにくいこと・先ほどの「応用」の考え方を踏襲していること終了条件や更新時の値もテンプレ化されているため、バグに気をつける必要性があまりないことが利点です。そのテンプレートは以下のようになっています。ok = N; ng = -1; while(abs(ok - ng) > 1) {   mid = (ok + ng) / 2;   if(solve(mid))   {     ok = mid;   }   else   {     ng = mid;   } }   ただし、Nは配列の要素数、absは絶対値を返す関数、solveはmidが条件を満たすかを判定する関数です。midが条件を満たす場合はokの値をmidで更新し、midが条件を満たさない場合はngの値をmidで更新するような、非常にシンプルな仕組みになっています。また、探索終了時には必ずokとngの位置が隣り合うようになるため終了条件も明確です。▼具体例最後に具体例を通して「めぐる式二分探索」の動きを見ていきます。2 3 5 6 7 8 9このようなソート済み配列から3の位置を調べたいとします。ここである条件を以下のように設定します。・条件を満たす(OK):3以上・条件を満たさない(NG):3未満これで実際の動きを見てみます。 - 2 3 5 6 7 8 9 -青色がOK、赤色がNGの場所を指しています。はじめはOKとNGの位置は配列外としておきます。 - 2 3 5 6 7 8 9 -OK=7とNG=-1の平均は3なので、6が条件を満たすかどうかを調べます。 - 2 3 5 6 7 8 9 -6は3以上であるため条件を満たします。よって、6より右側はすべて条件を満たすことがわかりました。 - 2 3 5 6 7 8 9 -OK=3とNG=-1の平均は1なので、3が条件を満たすかどうかを調べます。 - 2 3 5 6 7 8 9 -3は3以上であるため条件を満たします。よって、3より右側はすべて条件を満たすことがわかりました。 - 2 3 5 6 7 8 9 -OK=1とNG=-1の平均は0なので、2が条件を満たすかどうかを調べます。 - 2 3 5 6 7 8 9 -2は3以上ではないため条件を満たしません。よって、2より左側はすべて条件を満たさないことがわかりました。OK=1とNG=0の差の絶対値が1以下となったため探索終了です。OKの位置を見ると値が3であることが確認できます。(厳密には3以上の要素の中で最小のものが求まります。)▼終わりにいかがだったでしょうか。二分探索でバグが発生する、応用がなかなかできないという方は是非めぐる式二分探索を活用していただけたらと思います。名前の由来↓https://twitter.com/meguru_comp/status/697008509376835584

  • テクログ

    Flutterはじめました(3)

    お久しぶりです。のりさんです。Flutter第3弾を書きたいと思います。前回のブログでは、Flutterの動きをざっくりと理解するためデモアプリのソースコードをみていきました。【過去Flutter関連記事】・第1回:開発環境構築・第2回:デモアプリのソースコードについて今回はFlutterのAssets(アセッツ)という仕組みを使ってアプリ内からファイルを利用するプログラムを書いてみたいと思います。【開発環境】・Windows10・Android Studio ArcticFox 2020.3.1・Flutter 2.2.2それではデモアプリのソースコードを修正して進めていきたいと思います。①ファイルの準備 アプリ内で利用したいファイルは、プロジェクトに置いておく必要があるようです。 プロジェクト配下にassetsというフォルダを作成し、そこへファイルを置いてみました。  上記のようなこんな感じですね。②プロジェクトの設定 プロジェクト配下に「pubspec.yaml」というファイルがあります。 こちらのファイルにプロジェクトの設定が書かれているようです。 ①のファイルをAssetsに登録することでアプリ内から利用できるようになるようなので 「pubspec.yaml」にある「assets:」の部分にファイルパスを設定していきます。  書き終わったら右上の「Pub get」ボタンを押すことで適用されるようなので ボタンを押してみます。 exit code 0 となったので問題なく登録できたということのようです。 ③アプリ内から利用してみる プロジェクト作成時のデモアプリから以下を変更していきます。  【変更内容】 A.画面タイトルを変更する  ⇒「Assets画像の表示」へ変更 B.中央のカウンターテキストが表示されている箇所  ⇒画像が中央に表示されるようにする C.右下の丸いボタン(+)  ・アイコンを(+)から画像のものに変更  ・ボタン押下時、状態によって画像表示を切り替える   ⇒画像が表示されていない状態:画像を表示する   ⇒画像が表示されている状態:画像を非表示にする 【ソースコード】   「A」はタイトルの内容を変更するだけとなります。  画像の表示状態を管理するために_showImageプロパティを用意しました。 「B」では三項演算子を使って現在の表示状態によって画像を表示するか判断しています。 _showImageがtrueの場合は画像を表示し、falseでは空のテキストを表示しています。 「C」の右下の丸いボタンでは ボタンを押すたびに画像の表示と非表示が切り替わるように OnPressedで_showImageの値(true/false)を設定しています。 ここでは値変更後の再描画をするためsetState関数も呼び出しています。 またchildの部分ではアイコンをデモアプリのものから変更しました。①~③が完了したものをAndroidエミュレータで実行してみます。 おお、こんな感じで表示されました!左が初期表示で、右下のボタンを押すと画像が中央に表示されもう一度押すと非表示になりますね。今回はAssetsを使って画像ファイルを表示できるようにしてみました。Assetsを使うことで画像以外のファイルも利用できるようなので他のファイルでも試していきたいと思います。それではまた!

  • テクログ

    Google MeetをYoutube Live配信しよう! ~Mac編~

    こんにちは!福神漬けです!みなさんWEB通話の内容をYoutube Live配信したいな〜〜〜って思ったこと多いと思うんですよ。Windowsだとそんなに大変じゃないみたいなんですが、macでやった際にそれなりに手間だったので今回書いてみようと思います。ちなみに配信PCはMacbook proです。今回はこちらの方の記事を120%参考にさせていただいております。https://blog.monochromegane.com/blog/2020/03/03/minimum-start-for-online-event/あとLive配信に慣れないうちは入念にリハーサルするのをオススメします!!!使うツール、サービスは下記です。・Youtube Live・Google Meet・OBS Studio・BlackHole (仮想オーディオデバイス)・できればMacとは別にもう1台Google meetを使える端末。スマホでよい① まずはYoutube Liveと OBS Studioを連携しましょう。やり方は検索すると素晴らしい記事がたくさんヒットします。② BlackHoleをインストールします。2chと16chがありますが16chでよさそうです。③音声周りを設定します。一番怖いのがOBSやmeetに音声がダブって入ることなので、思い切って下記の感じにします。・OBSの設定からマイク → マイク2を作成してBlackHole 16chで設定。・OBSのマイク1をミュートに・MacOSの音声出力をBlackHoleに変更・MacOSの音声入力をミュート(直接音を拾えなくする)・配信PCでのGoogle Meetの設定確認(出力は既定でBlackHoleになってるはず)・配信PCのGoogle Meetはマイクをミュートに④じゃあどうやってMeetするんだ、という話ですが、配信PCとは別の端末からMeetに入ってそっちで通話します!なんせ配信PCはMeetの出力をBlackHoleにしているので、Meetの音声が直接聞こえないんですね。配信PCから音を出したい場合は追加で設定が必要なのですが、難易度が高そうであまりお勧めしません。(というか自分は逃げました)これでMeetの会話をLive配信できているはずです!上にも書きましたがリハーサルは入念に行いましょう!お疲れ様でした!