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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    Resource Hintsを使いこなしたい

    今対応している案件でHTMLレンダリングを高速化できないかと考えておりまして、今までバックエンド側の対策を中心に考えていたのですが、フロントも何か解決策はないかと思い調べていたらResource Hintsなるものに出会いました。ざっくり言うと遷移前のページで遷移先の情報を事前取得することで遷移先のレンダリングを早くするという手法です。実用例としては以下の様にユーザーが次に移動すると考えられるページURLを指定します。・フォームの入力画面→確認画面・ブログの一覧・詳細→トップページHTMLに属性を追加するだけで簡単に実現できるので試していこうと思います。

  • テクログ

    Googleアナリティクス4(GA4)の備忘録

    業務でGoogleアナリティクスを使用する機会があり、少し見ないうちに変更されている点が多くありましたので、自分用として調査しました。2種類のバージョンの存在GAには、ユニバーサル アナリティクス(UA)と次世代のGoogle アナリティクス4(GA4)があり、設定次第で両方の画面を確認できます。これまでのUAでは「マイレポート機能」が便利だったのですがGA4では削除され、大きくアプリ寄りになっている印象を受けました。以下の「データストリーム」という設定項目からもわかる通り、順番も「iOS」と「Android」がウェブに先んじています。※GA4は「アプリ + ウェブ」という名称で開発を進められていた経緯があります。GA4の売りについてAI(機械学習)による行動予測機能がセールスポイントです。(1)購入の可能性アプリ/ウェブを訪問したユーザーが、今後7日以内に商品購入に至る可能性を予測する指標。(2)離脱の可能性アプリ/ウェブを訪問したユーザーが、今後7日以内に利用しなくなる可能性を予測する指標。上記機能を試したのですが、残念ながら該当サイトではデータが思うようにまだ蓄積されておらず、AIによる候補表示がうまく機能しませんでした。これからの機能という印象でした(ビッグデータがないと統計的にも有意にならないため)。特にゲームアプリの場合は、月額課金(サブスクリプション)の継続率が重要になるので、離脱予測による事前対策も一考だと思います。便利に感じた機能について分析を開始するに当たって、どのような項目から始めたらよいかを、質門形式で教えてくれます。これは「アナリティクス インテリジェンス」と呼ばれる機能です。質問形式の選択肢は、ユーザーフレンドリーなインターフェイスといえます。データ分析に答えはありませんが、始めにこうした機能が提示されることで、とても扱いやすく感じました。*実際の分析データなども社内資料としては作成したのですが、データは繊細な面があるのでここでの掲載は行いません。今後も最新のGA機能をテストしていきたいと思います。

  • テクログ

    MySQLの最大行サイズは65,535 バイトらしいです

    ## 試した環境* XAMPP v3.2.3  * mysql Ver 15.1 Distrib 10.1.38-MariaDB, for Win64 (AMD64)mariaDBなので厳密にはMySQLではないと思いますが無視しています。MySQLであると思っています。## 最大行サイズMySQLの最大行サイズは **65,535 バイト**らしいですテーブルの内部表現の最大行サイズは 65,535 バイトであり、ストレージエンジンがこれ以上のサイズの行をサポートできる場合でもこのサイズになります。BLOB または TEXT カラムはこのサイズに 9 から 12 バイトしか関与しないので、これらのカラムはこのサイズに含まれません。https://dev.mysql.com/doc/refman/5.6/ja/storage-requirements.html## 試す以下の状況だとエラーにはならない* varchar => 文字コードの1文字に使われるバイト数×長さ のバイトが確保される  * utf8 は1文字あたり3バイト使われる* MySQLの最大行サイズは **65,535 バイト*** int で**4バイト**確保される* のこり使えるバイト数 65535 - 4 = **65531バイトのはず*** utf8のvarcharで 65531 / 3 = 21843.666....  * 21843 文字は使えそうですが**実際にはエラーになりました**  * 21842 文字は大丈夫でした## 実際に使用されるデータ量を計算してみる### 前提として varchar は長さを格納するために 2バイト 使用します> 可変長カラムのストレージには長さバイトが含まれ、これには行サイズに対して評価されます。たとえば、VARCHAR(255) CHARACTER SET utf8 カラムは、値の長さを格納するために 2 バイトを使用するので、それぞれの値は最大 767 バイトを使用できます。https://dev.mysql.com/doc/refman/5.6/ja/column-count-limit.htmlvarcharだと**2バイト**は値の長さを格納するのに使うらしいです。### 踏まえて計算してみる* 21843 文字の場合、使用されるバイト数は 21843 * 3 + 2 = 65,531バイト  * int型の4バイトを足すと **65,535 バイト** になります。最大行サイズと一致しますが、65,535 バイトは駄目っていうことですかね。それとも別のデータを格納しているから駄目とか。* 21842 文字の場合、使用されるバイト数は 21842 * 3 + 2 = 65,528バイト  * int型の4バイトを足すと **65,532 バイト** になります。最大行サイズより 3バイト 少ないデータ量なので問題ないのは納得です。## 最大行サイズぴったりだとアウトなんですかね不明です。このブログ投稿のエディタには太字がないのか。

  • テクログ

    超便利なツール「Magnet」って知っていますか?

    初めまして!11月からコアテックに入社しました、りょうたです。今回はMacの使い勝手をよくする Magnet というツールを紹介させてください!パソコンで作業している時、複数の画面を同時に開いて作業したい時ってありませんか?僕はエディタとブラウザを同時に開いて作業することが多いです。そういう時、みなさんはどうしていますか?えっ、手動で画面表示サイズを調整しているんですか!!それ、めっちゃくちゃ面倒じゃないですか、、僕も最初はそうしてたんですよ。でも頻繁に画面を切り替えたり見比べるので、それはもう骨が折れすぎて粉々になるくらい面倒な作業でした。一応Macには標準で画面分割する機能があるのですが、これが使いづらい、、そんな悩みを解決するのが、このMagnetというツールなんです!!ショートカットキーで画面を簡単に分割できるんですよ。例えば、controll・option・←または→ で左右分割、controll・option・↑または↓ で上下分割、controll・option・U, I, J, K でそれぞ左上・右上・左下・右下に4分の1分割といった具合にやることで、左右に分割:左上・右上・下に分割:こんな感じに一瞬で分割してくれます。一つの画面だけを全体表示にしたければ、controll・option・Enter 同時押しです。難点は、、、有料(500円)です(泣)でも僕は10秒使って思いましたね、「ああ、元とったわ」って。作業効率が上がること間違いなしなので、是非試してみてください!探すのが面倒な方はこちらからどうぞhttps://apps.apple.com/jp/app/magnet-%E3%83%9E%E3%82%B0%E3%83%8D%E3%83%83%E3%83%88/id441258766?mt=12

  • テクログ

    ターミナルって意外と便利だよって話

    挨拶初めまして!昨年にコアテックへ参加しましたとみーです! どうぞよろしくお願いします!!お正月は某惑星フロンティアでチャンピオンになるべく戦ってたり、某宇宙世紀ロボに乗り、傭兵となって戦う○○オペレーション2をやってたりしてました!それで終わりにするには色々とアレだろと思いましたので、一つ技術っぽいことでも書かせてもらおうと思います。ターミナルコマンドを話す前の前置き(読み飛ばし可)みなさん、ターミナルって知ってますか!?macに初期から設置されているCLIツールです!!より詳しい説明とかは「ターミナル mac」 とかでググれば沢山でてきますので省略します!windowsではコマンドプロンプトってやつが同じようなツールになりますが叩く事が出来るコマンドは色々と違います。 今回はターミナルコマンドを書かせて貰います。突然ですが、こんな出来事に出会ったことありませんか!?例えば、とあるWebで野菜を販売している八百屋さんのお話です。「りんご」や「キャベツ」など、様々な野菜や果物を売っておりましたが、今度新しく「青森県産のりんご」や「群馬県産のキャベツ」など、特別な産地を追加するとのこと!お客さんに見せる画像データも、特別美味しそうに見える別の物にしたいと言う話です!画像の新規追加や差し替えはとみーの仕事です!画像を受け取ったら早速やりましょう!お、やってきたやってきた!これが新しい画像たちが入ってるディレクトリ(フォルダ)ですね!!!カチカチッ(ダブルクリック)00001.jpg00002.jpg00003.jpg以下10000件以上の画像…うわあああぁぁぁぁぁぁ!?!!?「青森県産のりんご」や「群馬県産のキャベツ」の画像がどれか、わからないのである早速、八百屋さんにお問い合わせ。八百屋さんもすぐに対応してくれて、対応表を送ってくれました! やったね!!00001.jpg 青森県産のりんご00002.jpg 群馬県産のキャベツ00003.jpg 普通のりんご以下10000件以上の画像…なるほど、これでどれが何の画像なのか、わかるようになりました!あとは、このまま表示させちゃえばおしまいです!!「青森県産のりんご」は「00001.jpg」の画像を表示させてー。「群馬県産のキャベツ」は「00002.jpg」の画像を表示させてー……よしっ!(某指差し猫感先輩に怒られました。。。番号だけじゃわからない。 突然、まったく知らない「千葉県産のほうれん草」画像を差し替えて欲しいって言われたらどうするの?とのことおっしゃるとおり! それじゃ、この画像たちの名前を変えましょうか! うん!!……うん? この1万件以上の画像を……?ターミナルコマンドさぁ前置きが長くなりましたが、ここからが本番です。この1万件以上の画像名、それっぽいものに変えましょうという作業です。手元にあるのは以下のデータです。1万件以上の画像データ「〇〇の〇〇」という文字列 さて、それではターミナルコマンドの時間です。※注意ターミナルコマンドで今回書く内容「ファイル名変更」は基本的には不可逆です。元に戻すのは難しいです。失敗しても良いように必ずバックアップを取ったり、みんながアクセスする環境で何かを作ったり、移動させるコマンドを叩くのは出来る限りやめましょう。1.「青森県産のりんご」のような文字列だけを抜き取ります$ grep '.*の.*' 画像データリストのファイル > ○○の〇〇.txt 2.抜き取った「〇〇(都道府県や[普通])の」と「の〇〇(野菜や果物)」の全ての種類を洗い出す$ cat ○○の〇〇.txt | sed -e 's/の.*//g' |  sort -u > 都道府県や普通.txt $ cat ○○の〇〇.txt | sed -e 's/.*の//g' |  sort -u > 野菜や果物.txt 3.抜き取ったデータを元に、変換後の文字列名をつくりますここは手作業です。 「青森県産」→「aomori_」「りんご」→「apple」などに変換する対応表を作ります4.都道府県などの対応表を元にして、コマンドを叩き続けます(都道府県の関係上、どんなに最低でも47回を超えます)$ sed -e 's/青森県産の/aomori_/g' 画像データリストのファイル > 画像データリストのファイル_new $ sed -e 's/群馬県産の/gunma_/g' 画像データリストのファイル_new > 画像データリストのファイル_new … 5.野菜も同様に、[.jpg]という文字列を追加してコマンドを叩き続けます(全種類分、叩きます)$ sed -e 's/りんご/apple.jpg/g' 画像データリストのファイル_new > 画像データリストのファイル_new … 6.「画像データリストのファイル_new」を使って、画像データの名前を変換$ cat 画像データリストのファイル_new | xargs -I % mv % 以上!これで「00001.jpg」という「青森県産のりんご」の画像名を「aomori_apple.jpg」に変換する、という作業を1万件以上の画像にそれぞれ対応出来たはずです!(遥か大昔の案件を参考に身元が割れないよう改変して書いてるので、 コマンドが汚いとかいう意見があったり細かいところでミスが出る 可能性があるかもしれません。 何かしらの形で聞いてくれたら答えたいです)いや、待って。 都道府県とかで最低47回以上コマンド叩くの、面倒くさくない?4、5番の対応表を元にする手作業の部分ですね!? わかります!!似たようなコマンドをバシバシ叩くことでミスが出ますし、ここは直すべきですね!しかし、とみーが知ってるターミナルのコマンドは、引数は一つまで!つまり、とみー流のターミナルのコマンドじゃ対応できません!!なので、今度はシェルの話をしましょうか(次の機会があればです)ここまで長文を読んで頂いた皆様方、ありがとうございます!それでは〜

  • テクログ

    Chatwrok API でダイレクトチャットに通知を送る方法

    要点Chatwrok API でダイレクトチャットに特殊な通知をしたい場合は、https://api.chatwork.com/v2/contacts でコンタクト一覧が手に入るので、そこにある該当アカウントの room_id にメッセージを送ります。背景アカウント作成を ChatOps でやりたいパスワードも自動発行して、発行コマンドを叩いたユーザーにだけ通知させたいたったこれだけです。これだけですが、正式名称であるダイレクトチャットで探しても出ない出ない。「Chatwork API ダイレクトチャット」などで Google 検索しても、「結局どうするの?」状態です。私の探し方が悪いのかもしれませんが、このままだと癪なので、自分で方法を書くことにしました。ダイレクトチャットへの送信方法1. ダイレクトチャット用の部屋番号を取得まずダイレクトチャット用の部屋番号を取得します。というよりも、ここができたら後は幾らでもネット上に情報があります。以下、 curl での実行例です。 curl -H "X-ChatWorkToken: APIトークン" "https://api.chatwork.com/v2/contacts" この結果、以下のような JSON がレスポンスとして返ってきます。[  {   "account_id": 000000,   "room_id": 000000000,   "name": "チャットワーク",   "chatwork_id": "chatwork",   "organization_id": 000000,   "organization_name": "チャットワーク",   "department": "",   "avatar_image_url": "https://appdata.chatwork.com/avatar/ico_avatar_notfound.png"  }, . . . ] ダイレクトチャットを送りたいアカウントのID と同じ account_id でフィルタリングを行い、room_id を取得します。jq で取得するならこうです。 curl -H "X-ChatWorkToken: APIトークン" "https://api.chatwork.com/v2/contacts" | jq '.[] | select(.account_id==ダイレクトチャットを送りたいアカウントのID)' | jq '.room_id' 2回パイプ噛ませる必要はない気もしますが、jq で複雑な条件のフィルタリングをしようとするとやり方を忘れるので、こうしています。2. ダイレクトチャットを送信する上で取得した部屋番号に送るだけです。それ以外は通常の使い方のままです。 まとめChatwrok API でダイレクトチャットに特殊な通知をしたい場合は、https://api.chatwork.com/v2/contacts でコンタクト一覧が手に入るので、そこにある該当アカウントの room_id にメッセージを送る!