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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    bfcache と popstateイベント ~地獄のブラウザバック友達~

    どうも!最近、「地獄のブラウザバック友達」ができたわいです!親にはあの子たちとは付き合うなと言われていたのですが、、はい。ブラウザバックを検知して発火するpopstateイベントまず、今回実装しようとした内容は、一覧ページがあって、そこで詳細ボタンをクリックすると、詳細ページがモーダルとして表示されるそして、そのモーダルには一覧ページに戻るための閉じるボタンがあり、ブラウザバックボタンを押下した場合も遷移せず、閉じるボタンと同じ挙動をするというものです。上記の挙動は、History API を使用して実装しました。(簡潔に書くためにjQueryを使ってます。すみません)// 詳細ボタンを押下 $(document).on('click', '.js-detail-open', function() {     history.pushState(null, null, '{$詳細ページのurl}'); // ブラウザバック検知用に履歴を追加     modalOpen(); // モーダルを開く処理 }); // モーダル閉じるボタンを押下 $(document).on('click', '.js-detail-close', function() {     // popstateイベントを発火させる(ブラウザバック押下時と同じ挙動に)     history.back(); }); // ブラウザバック押下時にページ遷移せず、動的に追加したStateが履歴から取り除かれたときに発火 window.addEventListener('popstate', function() {     modalClose(); // モーダルを閉じる処理 }); 簡単に書きましたが、モーダル閉じるボタン押下時に「history.back();」させて履歴を取り除いておくとか、下記bfcacheに出くわしてからいろいろ改善しました。ポイントは、JSで動的に追加した履歴でないと、ブラウザバック時にpopstateイベントが発火しないというところです。挙動についてのイメージは、下記記事が参考になるかと思います。イメージさえ掴めれば、そこまでややこしい話ではないと思います。ブラウザバックをトリガーにしてイベントを発火させる方法JSも含めてすべてのページ情報をメモリにキャッシュするbfcachebfcacheはWebページを速く表示させるためのブラウザの機能です。詳細については、下記記事が参考になりました。Back/forward cache簡単に言うと見出しの通りで、具体的にどのようなことが起こるかというと、ハンバーガーメニューを開いてリンクをクリックして、遷移した先でブラウザバックをすると、ハンバーガーメニューが開いたままで先ほどのページが表示されるとかです。以前ロードしたJSがそのまま使われて、ブラウザバック時にJSをロードしてくれない。ページを離れたときの状態がそのまま再現されるというものです。今回、このbfcacheが iOS の Safari / Chrome の両方で発生しました。ブラウザバック時にキャッシュされているpopstateイベントが発火してバグるbfcacheのせいで、ハンバーガーメニューが開いているだけならまだよかったのですが、初回アクセス時に設定したpopstateイベントがブラウザバック時にそのまま発火して、モーダルを閉じる処理(省略してますが、結構複雑…)を実行してしまうバグにハマりました。bfcacheをJSで検知するには、PageTransitionEvent.persisted を使えば良いそうです。ということで、下記記事を参考にして、ページ読み込みがbfcacheからであれば、JSで強制リロードしてもう一度JSをロードするという処理を実装しました。ブラウザの「戻る」ボタンでキャッシュが表示されてしまう際の対策これで一件落着かと思えば、、、悲劇が起きました、、連続で該当処理が入っているページへ遷移していき、その後ブラウザバックを連続で押していくと、ブラウザバック2回まではページのリロードという期待通りの動きをしてくたのですが、3回目のブラウザバック時に、JSでbfcacheを検知できない(bfcache自体が発動していない?)にもかかわらず、popstateイベントが発火してしまいました。ブラウザの挙動を見る感じ、履歴をpushStateで余分に追加した分のpopstateイベントが発火していました。つまり、適切に履歴を取り除いていかないとこの問題は解決できないということです。そこらへんはブラウザがよきにはからってくれると思っていましたが、そんなに甘くありませんでした。最終的には、下記のような実装で、無事「地獄のブラウザバック友達」と仲良くなることができました。let isBFCache = false; window.onpageshow = function(event) {     // bfcacheを検知、popstateイベントより先に発火     isBFCache = event.persisted; }; // 詳細ボタンを押下 $(document).on('click', '.js-detail-open', function() {     history.pushState(null, null, '{$詳細ページのurl}'); // ブラウザバック検知用に履歴を追加     modalOpen(); // モーダルを開く処理 }); // モーダル閉じるボタンを押下 $(document).on('click', '.js-detail-close', function() {     // popstateイベントを発火させる(ブラウザバック押下時と同じ挙動に)     history.back(); }); // ブラウザバック押下時にページ遷移せず、動的に追加したStateが履歴から取り除かれたときに発火 window.addEventListener('popstate', function() {     if (isBFCache) {         isBFCache = false;         return false;     }     modalClose(); // モーダルを閉じる処理 }); いざ該当箇所のコードだけ抜き出してみると考えやすいですが、ソースコードの方は複雑すぎて、なかなか思考の整理ができませんでした。思考が整理できさえすれば、あとはやることが決まってくるので、いかに論理的に問題を分割できるかということが重要なスキルだなと改めて感じました。まあ、そんな大層なことは言わなくていいんですよ。友達が増えたので、それでOKです。以上、わいでした。健闘を祈る!!

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

    テクログ

    Flutterはじめました

    お久しぶりです。 のりさんです。  最近暑くなってきましたね。 みなさんいかがお過ごしでしょうか。  今回は最近気になっている「Flutter(フラッター)」について書きたいと思います。  みなさん「Flutter」について、どこかで聞いたことがあるでしょうか。 私も最近興味を持ち始めたので、あまり聞きなれない人もいるかもしれません。   ● Flutterとは  ・Googleが開発したクロスプラットフォームフレームワーク ・Dart(ダート)という言語で開発を行い、AndroidやiOS等のアプリとしてビルドできる というものらしいです。  AndroidやiOSアプリの開発を同時に開発出来て工数削減とか期待できそうですね。   2021年3月にFlutterのバージョンが「2」になったようです。 Flutter2ではAndroidやiOSアプリに加えて以下について対応が増えたとのこと。  ・Windows  ・macOS  ・Linux  ・Webブラウザ   Flutterの古いバージョンで開発したアプリを新バージョンに更新して 少し手を加えるだけで他のOSでも動作するようになるのはよさそうですね。  (6月現在では「2.2.2」となっており、機能がどんどん追加されていきそうな印象です)   以上のようなところからクロスプラットフォーム開発に興味を持ったのですが  Flutterを知るには実際に触ってみるのがよさそうなので 環境構築からやっていきたいと思います。 ● Flutterの環境構築 実際に環境構築してFlutterのデモアプリが動作するところまで書きたいと思います。  PCについてWindows10(Pro)利用のため、こちらで進めていきます。   ■ Flutter SDK   1. 以下のFlutter公式サイトにアクセスしSDKをダウンロードします。  https://flutter.dev/docs/get-started/install/windows  ⇒今回は「Flutter_windows_2.2.2-stable.zip」で進めていきます。    2. SDKファイルのダウンロードが終わったらzipファイルを解凍します。   3. 環境変数の「Path」設定します。  ⇒コントロールパネル>システムとセキュリティ>システム>システムの詳細設定>環境変数   変数名Pathを編集し【2.解凍ディレクトリ\flutter\bin】を追加します。   4. PowerShell等で以下のコマンドを入力し、バージョン情報が表示されれば完了です。  >flutter --version                                        Flutter 2.2.2 • channel stable                     ■ Android Studio   1. ソフトウェア(開発環境)のインストール  以下よりダウンロードしてインストールしました。  https://developer.android.com/studio?hl=ja     2. Andorid Studioを日本語化  以下のサイトよりpleiades-win.zipをダウンロードしてzipを解凍しました。  https://mergedoc.osdn.jp/#pleiades.html#PLUGIN   解凍したフォルダにあるsetup.exeを実行していきます。  日本語化の画面が表示されたら「日本語化するアプリケーション」を選択しファイルパスを設定しました(例:C:\Program Files\Android\Android Studio\bin\studio64.exe )日本語化するボタンをクリックで日本語化は完了です。    3. Android SDKのライセンス条項への承諾  PowerShell等で以下のコマンドを実行し「y」を入力して進みました。 >flutter doctor --android-licenses     4. Flutterプラグインのインストール  Android Studioを起動します(日本語化されていました)  起動画面>構成>プラグインから「Flutter」プラグイン※をインストールします。  ※flutter.devのダウンロード数が9M以上になっているもの   5. FlutterのAndroid Studio認識設定  PowerShell等で以下のコマンドを実行します  >flutter config --android-studio-dir="【インストールパス※】"  ※例:C:\Program Files\Android\Android Studio    6. Android仮想デバイスの作成  AndroidStudioからAVD Managerをクリックし仮想デバイスを追加します。  ⇒今回「Pixel 3 XL API 30(Android 11)」を作成してみました。   ■ Flutter デモアプリ  1. 新規Flutterプロジェクトの作成  Android Studioのメニュー>ファイル>新規 Flutter プロジェクトをクリックします。  Flutter Appを選択し、Flutter SDKパスに【SDK解凍パス】を設定し 次へをクリックして進みます。 次の画面はデモの動作確認なので、そのまま完了をクリックします。   2. Flutterデモアプリを実行してみます  Androidエミュレータを起動します。 起動したら右側にある実行ボタンをクリックします。おお、Androidでデモアプリが起動しました! +ボタンをタップ(クリック)すると数字が増えていきます 先ほどのデバイス選択にてEdgeも選択できるようなのでこちらも試してみたいと思います。Edgeを選択して実行ボタンをクリックしてみます。 こちらもEdgeブラウザで動作していますね。同じく+ボタンで数字が増えていきます。1つのソースでどちらも動作するっていいですね!今回はAndroidとブラウザで同じデモプログラムが動作するところまで書いてみました。 これからデモのソースコードを参考にしつつDart言語について理解を深めたいと思います。

  • グルメ

    第一回「あ、これ意外といけるじゃん」選手権

    さぁ、始まりました、第一回「あ、これ意外といけるじゃん」選手権!これは異なる食材を組み合わせて「あ、これ意外といけるじゃん」と思ったものを探す大会となっております。司会進行役はわたくしじゅんすが務めさせていただきます。今回のテーマは「生ハム×メロン」の「メロン」をほかのフルーツで試してもらい、おいしかった組み合わせが優勝となります!エントリーされた選手は以下になります。エントリーNo.1イチゴエントリーNo.2バナナエントリーNo.3オレンジエントリーNo.4スイカエントリーNo.5パインいやぁ、、どれも個性のある選手ですねぇ、、いったいどのような戦いを見せてくれるのか、わたくし期待しております、!(食べるのはわたくしなんですけどね)それではエントリーNo.1、イチゴ選手お願いします!( ˘ω₍˘ )⁾⁾ŧ‹"ŧ‹"、、、、(´⌒`;)、、、、(´ω`)食べられなくはないですが、イチゴの酸味と生ハムの塩味が喧嘩しちゃってますね、、それにイチゴの主張が強いかなと思いました。大会本番なので事前にお互いコンディションは整えておいてもらいたいものですね、続きましてエントリーNo.2、バナナ選手お願いします!( ˘ω₍˘ )⁾⁾ŧ‹"ŧ‹"、、、、(´⌒`;)、、、、(´・ω・):;*。’:;ブッこれは強烈ですね、、バナナ単体ではおいしいのにそこに生ハムが加わると何が何だかわからなくて、それでも味を確かめようとしましたが食感が何とも言えない不快感があったので断念、、(ちゃんと食べました)ただ、大会を盛り上げてくれたのは評価したいと思います、!続きましてエントリーNo.3、オレンジ選手お願いします!( ˘ω₍˘ )⁾⁾ŧ‹"ŧ‹"、、、、(´⌒`;)、、、、(´ω`)イチゴ選手と同じです!以上!続きましてエントリーNo.4、スイカ選手お願いします!( ˘ω₍˘ )⁾⁾ŧ‹"ŧ‹"、、、、(゚д゚)、、、、(゚д゚)ウ-(゚Д゚)マー(゚A゚)イ-…ヽ(゚∀゚)ノ…ゾォォォォォ!!!!うまい!!!うまいぞぉ!!!スイカの程よい甘さとみずみずしさが生ハムを際立たせてくれて、生ハムのうまみがスイカの水分に上乗せされるので口いっぱいに生ハムのうま味が広がります!生ハムの肉汁ビッグウェーブを喰らいましたね、、さて、このスイカ選手を超えられるのか、、最後にエントリーNo.5、パイン選手お願いします!( ˘ω₍˘ )⁾⁾ŧ‹"ŧ‹"、、、、(´⌒`;)、、、、(´ω`)ウマイ、、?おいしいけれどちょっとパインの主張が強いかなと思いました。パインにちょっと火を通してみたりするとまた違ったのかもしれないですね。今後に期待したいと思います!さて、、各選手の評価が終わりましたので気になる結果のほうを発表したいと思います!!1位:スイカ2位:パイン3位:オレンジ4位:イチゴ5位:バナナ優勝はスイカ選手です!!!いやぁ、素晴らしい発見をありがとうございました!これから夏が始まりますので皆さんも是非お試しください!ちなみに「生ハム×メロン」より「生ハム×スイカ」のほうが個人的に好きでした。

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

    グルメ

    カツカレーが食べたい

    今回の定期健診で消化器系の異常がなくて、ホッとしている麦酒です、こんにちは。私、カツカレーが大好きなんです。理由は簡単です。私の好きな料理が、「カレー」「カツ」「唐揚げ」「家系ラーメン」等などなので、コラボであるカツカレーはもはや最強なのです。そして、私はかなりの大食漢でもあります。古い話ですが、フードファイターのジャイアント白田氏にとあるイベントで挑戦したこともあります。(タイムアップで負けましたが、あと1時間あれば勝っただろうと今でも思います)というわけで、デカ盛り店ももちろん大好きです。今回は、コロナ禍が落ち着いたらすぐにでも行きたい、デカ盛りカツカレーで有名すぎる2店をご紹介します。①古都  (埼玉県入間市)有名店ですね、TV出演は数知れないです。女将さんの強烈なキャラクターも人気の秘密でしょう。■とんかつカレー 普通盛り 1,080円写真だと伝わらないサイズ感が残念です。おまけで、アイスコーヒー、うどん、みそ汁、サラダ、(ここには映っていないですが)切り干し大根、ナムル、お新香セット、が付いています。しかも、カレールーとライスはお代わりできますw大盛りにするか迷いますが、美味しく食べて帰ろうと思ったらこの普通盛りくらいがちょうどいいですね。ここのカレーは何というか、給食で食べた味というか、素朴で懐かしい美味しさです。おまけに、とんかつは衣はサクサク、肉はやわらかに仕上がっています。忘れたころに無性に食べたくなり、自宅川崎市から2時間かけて食べに行きます。②お食事処 ぼんち  (山梨県甲斐市)私が通っていた高校が近かったため、部活帰りによく食べに行っていましたね。今のような全国区になる前から、「あの店やばい」で地元では有名店でした。■カツカレー(普通盛り)1,500円さあ、いきますよ、、、、はい、召し上がれ!なにこれ、余計なものがたくさんのっているしw バナナって・・カレーに隠れて見えないですが、カツ3枚入っています。あいかわらず撮影技術のせいで美味しそうに見えずにすみません。でも美味しいんですよ、カレーもトンカツも、、半分くらいまでは。バナナの下に敷き詰められている千切りキャベツが、後半戦で重くのしかかってきます。私、決して食べ物を残さない主義なのです。ですが、さすがにこれはギブアップしようか迷いました。量は問題ないものの味が単調になってきて、カレーに変化をつけにくいですね。大盛りもありますが、おふざけで注文するのは絶対にやめた方がいいです。緊急事態宣言が解除されたらどこに行こうか。平塚市に素晴らしいカツカレーがあるそうでなのでそこもいいなと。25年以上通い敬愛してやまない神保町の「まんてん」も絶対に行きます。皆さんも良いカレーライフを!

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

    雑記

    今ポケカが熱いって話

    皆さん初めまして。初めましてじゃない方も初めまして。しゃむぽんです。さて、みなさんは今何にハマっていますか?自分はポケモンカードにハマっています。いい歳してカードゲームかよって思いますよね。自分も思います。でもね聞いてください。今ほんとに熱いんですよ。ポケカ。ここ数ヶ月で急騰した人気のカードをざっと羅列してみます。これを見ていただければ今どれだけ熱いかが少しは伝わるかなと思います。マリィ 2ヶ月前 ¥30,000前後 → 現在 ¥50,000前後メイ 2ヶ月前 ¥10,000前後 → 現在 ¥20,000前後かんこうきゃく 2ヶ月前 ¥15,000前後 → 現在 ¥30,000前後たった2ヶ月でざっくり2倍ですね。これらのカードもさらに安い時期があったので、安かった頃にたくさん入手できている方は羨ましいですね。ご存知の方も多いのかなと思いますが、5/28にイーブイヒーローズというパックが発売されてこれも良くも悪くもかなり話題になっていますね。人気のイーブイ進化系のカードが全種類封入された豪華なパックになっているんですが、その人気からか、発売当初からずっと品薄状態で発売から二週間以上経った今でも満足に購入できていない方がいらっしゃるようです。さらにね、このパックから低確率で出る「スペシャルアート」というレアリティのカードがもう人気で。もっとも高いカードが「ブラッキーVMax」のスペシャルアートなんですが、カードショップで購入すると¥45,000というとんでもない価格で取引されています。↓これですね1パック¥165の商品から¥45,000が出るかもしれないってなったらそりゃみんな買いますよね。ポケモンカードにあまり興味がない方でも購入している感じみたいです。そんなわけでずっと品薄が続いているってことですね。スペシャルアートが高額なのはある程度仕方ないとは思いますが、せめても通常イラストのカードは、純粋なユーザーが満足に遊べるくらい流通したらいいなと思います。かくゆう自分もまだまともに集められていません。いつか買えるといいな。ほいでは。

  • テクログ

    Jamstackを理解する

    こんにちは!最近弊社の勉強会でJamstackを取り扱ったのでざっくりとまとめてみます!JamstackとはJavascript/API/Markup で構成されたシステムです特徴静的サイトであるWEBサーバーの管理が不要静的サイトのビルド時にAPIから最新のデータを取得、htmlに反映Jamstack構成が向いているサイトコーポレートサイトメディアページ基本的に全閲覧者に同一の情報を公開するようなサイトに向いていますJamstack構成のサイト作成に必要なものヘッドレスCMS-必要なデータを登録し、APIとして公開するためのサービスです静的サイトジェネレーター   -静的サイトを生成するためのライブラリですホスティングサービス          -作成した静的サイトを公開するためのサービスです勉強会では実際に以下の構成でサイトを作成しました!ヘッドレスCMSmicroCMS(https://microcms.io/)静的サイトジェネレーターNuxt.js(Vue.jsのフレームワーク)ホスティングサービスAWS Amplify(https://aws.amazon.com/jp/amplify/)サイト公開までの下準備Nuxt.jsでプロジェクトを作成し、git(今回はAWS CodeCommitを使用)に紐付けAWS Amplifyでビルドの設定とWebHookURLの発行microCMSでデータ公開のためのAPI設定とWebHookURLの紐付け基本的なサイト運用の流れmicroCMSでデータを登録し、公開AWS AmplifyがWebHookの通知を受け取り、自動的にビルド&デプロイ最新のデータが反映されたhtmlが公開microCMSとAWS Amplifyの設定は割愛しますが、どちらも基本的に管理画面でボタンを押して設定するだけなのでかなり簡単です!Jamstackについての感想サービス構成上向き不向きがありますが、静的サイトであればWEBサーバーの管理を考えずにサイト作成ができるのは非常に楽だと思いましたホスティングサービス側で自動的にCDN配信まで行ってくれるのは、正直驚きました。。余談ですがNuxt.js(Vue.js)とNext.js(React.js)の違いを調べたあとにTypeScriptについて興味が出てきたのでこちらも触っていきたいと思います!それではまた!