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

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

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

LIST OF ARTICLES

記事一覧

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

    雑記

    久しぶりの感覚

    どうも!過去を振り返らず一歩先の未来だけを見て生きていたいわいです!先日、"久しぶりの感覚" に襲われて、学生時代を思い出しました。みなさんも、このような経験をしたことはありませんか?今回はその話をしたいと思います。それは、令和3年4月18日 応用情報技術者試験の受験中に起こりました。私は、日本の学校教育が敷くレールの上を真面目に走ってきたので、比較的テストは得意な方です。テストに最適化されているので、基本を押さえて過去問を少し解けば、どういうことが聞かれるかは大体わかります。そのせいで、基本情報技術者試験の勉強も適当に過去問を解くだけで、合格はできました。ただ、全く知識が身についていません。基本情報も最初から解けたわけではなく、最初過去問を解いたときは正答率20%程度でした。結局、その程度の知識レベルからさほどレベルアップしませんでした。そこで、応用情報はちゃんと意味のある勉強をしようと考えました。参考書を買って、一通り読みました。元々ベースとなる知識を手に入れることが好きなので、とても良い勉強でした。仕事で使うだけの偏った知識とは違い、より根本的な考え方を手に入れ、それが仕事で得た知識と結びついて、、とかなり楽しかったです。そんな感じで、個人的に十分勉強したと胸を張った状態で試験に臨みました。午前試験は問題なく終わりました。午後試験が始まりました。ん?ん??むずかしいとちゅうまではわかるが、かんとうができないしっかりべんきょうしたはずなのに、わからんこれは、おちるぞ。いや、おちたくない。うかりたい。ぜったい、うかりたい。ぶぶんてんだ。ぶぶんてんをねらおう。もんだいをすべてりかいするのはむりだ。まて、まわりにはこのれべるのもんだいをとけるひとがいるのか。おれがへいきんいかなのか。ところで、なんだこのなつかしいかんじ。ひさしぶりにてすとでおいこまれているではないか。試験が終わりました。あっという間でしたが、とても長くも感じました。大学受験を思い出しました。良い感情でも悪い感情でもなく、ただあのときの感覚が蘇りました。おもしろくないオチで申し訳ないですが、試験結果はギリギリ合格でした。このままだと、ピクセルの無駄なので、勉強時間について参考程度に書いておきます。勉強時間というのは本当に人それぞれだと思うので、なんの意味もない数字ですが、気になる人もいるかと思うので。基本情報技術者試験時間:3日 + 当日の空き時間(10時間程度)内容:下記サイトの午前問題を分野別に70%超えるまで解きまくる   https://www.fe-siken.com/fekakomon.php応用情報技術者試験時間:3週間(50 ~ 60時間)内容:①参考書で一分野読み進める   ➁下記サイトの該当分野の午前問題を70%超えるまで解きまくる   https://www.ap-siken.com/apkakomon.php   上記サイクルを分野の数繰り返す※ 午後の対策を特にしなかったのは、飽きと時間の問題もありますが、  午前の問題を簡単に解ける力があれば、あとは読解力で対応できると考えたからです。今になって思いますが、余裕があれば1年分くらいは午後問題も解いておいた方が良いと思います。それをやっておけば、知識の少なさに早い段階で気付けたかもしれません。情報技術者試験の上位資格は骨がある試験だということが分かったので、また今度なにか受けてみたいと思います。以上、わいでした。健闘を祈る!!

  • テクログ

    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です。以上、わいでした。健闘を祈る!!

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

    レビュー

    Professional Podcast Listener

    どうも!あと数日で入社3年目に突入するわいです!約4か月周期で回ってくるこのブログ当番のたびに、前回自分が投稿した記事を読み返すのですが、変化してることがまあ多くておもしろいです。今回は、時間があっても、技術の勉強は一切していませんこんなことを言うておるわけですが、ここ1か月は業務後も技術に触れることが多いです。具体的には、C++を軽く勉強したり、基本情報技術者試験を受けたり、ラズパイでサーバ構築をやってみたり、、と。来月には、応用情報技術者試験が控えています。うーん、いかにも意欲に満ちた若手エンジニアという生活ですね。なぜこうも意識が変わったのかということを自分なりに分析してみますと、まず、チーム内ではそこそこの古参になってきてしまっている、そしてなにより、Rebuildというポッドキャストを聴き始めたというところに理由があると思います。在宅ワークになり、雑談をする機会が減ったことが原因で、最近は貪るように他人の雑談(ポッドキャスト)を聴いています。やっぱり、ラジオ・ポッドキャストは散歩や家事をしているときに片手間で聴けるのがいいですね。そんな中、出会ったのがRebuild(https://rebuild.fm/)です。内容については、毎回ゲストを迎えて、IT技術、ガジェット、政治、コンテンツについて語り合うといった感じです。ちなみに、この記事のタイトルは278: Professional Podcast Guest (N)のオマージュです。ゲストはほとんど固定メンバーで回していて、宮川さんとゲストが二人でトークするという感じです。ゲストによって専門が違ったり、みなさん個性があってとても面白いです。ただ共通点もあって、それはみなさん新しいものに貪欲で、自分の考え・意見をしっかり持っているということです。ほう、日本の(アメリカの)IT業界をけん引している人たちはこんなマインドで日々の生活を送っているのかと。そこで思ったわけですよね。「このままじゃいかん」と。というのは大げさで。ただ、自分のエンジニアに対する視野が広がったのだと思います。「高い専門性を持ちつつ、新しいことにも柔軟なおじさんっていいなー」と思うようになりました。というわけで、いろいろ刺激を受けられるのでRebuildおすすめです。IEや古いバージョンのiOSに文句を言いながらも、私物でiOS10のiPhone6sを使っていた私ですが、先日iPhone12miniに買い替えました。これもRebuild効果ですね。以上、わいでした。健闘を祈る!!

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

    雑記

    お前は一体何なんだ!?

    どうも!いつもわいわい、わいです!ブログを書くにあたって、前回のブログを見返していたら、こんなことが、、>最後に今年下半期の目標ですが、>・漢検2級>・世界遺産検定2級>・AWSソリューションアーキテクト アソシエイト>>のどれか一つでも取りますうわ、、すっかり忘れてて、もう年末になってしまった、、なんてことは言いません。しっかり、漢検2級に合格しました!まだ勉強を始めていませんが、12月13日には世界遺産検定2級の試験もあります!>・AWSソリューションアーキテクト アソシエイト???はい。試験日程すら、調べていません。お前は本当にエンジニアなのか?私の職業はエンジニアです。しかし、時間があっても、技術の勉強は一切していません。最近は専らポッドキャストを聴いています。おすすめを2つ。バイリンガルニュース (Bilingual News)  Michael & Mamihttps://podcasts.apple.com/jp/podcast/%E3%83%90%E3%82%A4%E3%83%AA%E3%83%B3%E3%82%AC%E3%83%AB%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9-bilingual-news/id653415937大学時代からちょくちょく聴いているのですが、一向に英語が上達しません。なぜなら、Mamiさんのかわいい日本語しか聴いていないからです。ただ、扱うテーマが面白いので、英語の勉強のためとかではなく、普通に楽しめます!歴史を面白く学ぶコテンラジオ (COTEN RADIO)COTEN inc.https://podcasts.apple.com/jp/podcast/%E6%AD%B4%E5%8F%B2%E3%82%92%E9%9D%A2%E7%99%BD%E3%81%8F%E5%AD%A6%E3%81%B6%E3%82%B3%E3%83%86%E3%83%B3%E3%83%A9%E3%82%B8%E3%82%AA-coten-radio/id1450522865本当に最近見つけたんですけど、おもしろすぎる!!私は学生の時からずっと歴史の勉強が好きなんですが、「私が歴史の勉強で好きなところ」が凝縮しています。つまらなくないです。人間という生き物を知れます。勉強になります。まあ、こんな感じでエンジニアとして成長するための休日を過ごしていないんですけど、最近少し危機感を覚えまして、Qiita Advent Calendar に登録しました。しっかり書くぞ!というモチベーションもありますが、世界遺産検定の勉強もしなくては、、本当に自分はどこに向かっているのか、、みなさんはどこに向かっていますか?以上、わいでした。健闘を祈る!!

  • 雑記

    初めてのQiita投稿

    どうも!在宅ワーカーのわいです!タイトルの通り、先日初めてQittaに記事を投稿しました。【初めての個人開発】FlaskアプリとTwitterの自動返信BotをHerokuにデプロイした話https://qiita.com/YiwaiY/items/ce790838725aba54c035すごいターゲットが狭いのですが、自分の躓いたところをメモ的に書きました。次はTwitter APIについて調べてもなかなか出てこなかったところを中心にメモを残したいと思います。記事を書いて思ったんですが、自分の言葉でまとめるというのはかなり大変な作業ですね。ちゃんと理解していない固有名詞の多さに驚きました。最後に今年下半期の目標ですが、・漢検2級・世界遺産検定2級・AWSソリューションアーキテクト アソシエイトのどれか一つでも取ります。宣言でもしないと、勉強のやる気が起こりません。ということで、みなさん圧力のほどよろしくお願いいたします。以上、わいでした。健闘を祈る!!

  • テクログ

    git clone 時に出た 「the remote end hung up unexpectedly」に辛勝した話

    どうも!エンジニア歴2年目に突入したわいです。連投になって申し訳ないんですけど、先日ハマった沼から抜け出すために苦悩したことを備忘録として書き留めます。ウダウダ書いていますが、結果だけ知りたい方はまとめまで読み飛ばしてください。何が起きたか開発環境を CodeCommit から git clone したときに、下記のエラーに阻まれた。(いろいろあって開発環境を消してしまった…)FATAL ERROR: Remote side unexpectedly closed network connection fatal: the remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed 1行目のエラーメッセージはなぜかコロコロ変わったりした。開発環境がないので、このままだと仕事ができないとかなり焦り、先輩に相談。>どうやら、リポジトリの容量がでかすぎるらしい試しに、先輩にもcloneし直してもらうと、、成功したあわよくばと思ったが、自力で解決するしかなくなった、、正直、Git Extensions のぬるま湯に1年間浸かりつづけていたので、Git が全くわかっていない。とりあえず、ガンガン試していく作戦に出た。何を試したかこれらの記事を参考にさせていただきました。ありがとうございます。https://stackoverflow.com/questions/6842687/the-remote-end-hung-up-unexpectedly-while-git-cloninghttps://cithukyaw.wordpress.com/2014/09/08/fix-for-the-fatal-error-early-eof-on-git-clone/https://qiita.com/cacahuatl/items/4d763e98f3934e3569ca① 「http.postBuffer」の設定を変更するgit config --global http.postBuffer 524288000 >結果は変わらなかったさらに2倍にしてみるgit config --global http.postBuffer 1048576000 >結果は変わらなかった② 「core.compression」を設定するhttps://git-scm.com/docs/git-configgit config --global core.compression 0 >結果は変わらなかった>設定値を -1, 9 と変えてみたが、結果は変わらなかった③  ssh接続のタイムアウトを設定する「Remote side unexpectedly closed network connection」で検索すると、sshのタイムアウトっぽいことが出てきたので試してみた~/.ssh/configServerAliveInterval 60 ServerAliveCountMax 3 >結果は変わらなかった④  一度にcloneする量を減らす(shallow clone)git clone --depth 1 <my_repo_URI> >結果は変わらなかったいくら調べても他の解決法が出てこないので、この時点でかなり詰んだと思った⑤  有線接続に変える在宅になってから、家の Wi-Fi で仕事をしていたことに先輩の一言で気づいたclone中の「MiB/s」が2倍近く増えたが、、>結果は変わらなかった>①~④のどれも結果は変わらなかった絶望の淵に立たされていたときに、一筋の光が差し込んだ⑥  masterブランチよりも軽いブランチをcloneするgit clone -b <smaller_branch> <my_repo_URI> >結果は変わらなかった一度にcloneする量を減らす(shallow clone)git clone -b <smaller_branch> --depth 1 <my_repo_URI> >clone成功!!現在、<smaller_branch>の最新のコミットだけ取得している状態なので、<smaller_branch>の全履歴を取得git fetch --unshallow >またもや、同様のエラーコミット数を制限して少しずつ履歴を取得git fetch --depth 8 # コミット数:8は任意 >fetch成功!!残りの履歴を取得git fetch --unshallow >fetch成功!!⑦  masterブランチを含め、他のブランチ情報を取得する.git/config の<smaller_branch>を * に変更する[remote "origin"]     url = <my_repo_URI>     fetch = +refs/heads/*:refs/remotes/origin/* git fetch >fetch成功!!これですべての履歴が取得できた>やっとの思いで、開発環境が復活!!まとめ結局、必要だったコマンド。git config --global http.postBuffer 524288000 git clone -b <smaller_branch> --depth 1 <my_repo_URI> git fetch --depth 8 git fetch --unshallow .git/config[remote "origin"]     url = <my_repo_URI>     fetch = +refs/heads/*:refs/remotes/origin/* git fetch 有線接続では以上のコマンドでcloneできた。Wi-Fi の場合、最後の git fetch だけがうまくいかなかった。>いきなり、* で fetch するのではなくて、別のブランチを一度 fetch して、再度 * で fetch したらいけたうーん、Gitムズイ、、そもそも、alpineでDocker環境を作ってたら、こんなことには、、他にいい方法があれば教えてください!以上、わいでした。健闘を祈る!!