Ghost Blog - ゆるっとエンジニアブログ

Ghost Blog - ゆるっとエンジニアブログ

Googleモバイルフレンドリーテストで表示が崩れる

スマホでページを閲覧するときは問題ないのに、Googleのモバイルフレンドリーテストでページをレンダリングするときはなぜか表示が崩れて、モバイルフレンドリーテストがFailしてました。解決方法につき記載します。事象 Googleのモバイルフレンドリーテストはモバイルデバイスでのページの使いやすさをテストするツールです。昨今よりGoogleではスマートフォンクローラが使用されているようで、このテストがこけているとSEOで検索下位に表示されたり、無視されてインデックスすらされないこともあるようで、非常に重要な問題です。モバイル端末からページを開く際に表示が崩れてなければ特に問題ないと思ってました。が、なぜかモバイルフレンドリーテストがFailしてました。テストだと以下のようにページがレンダリングされており、確かに表示が崩れております。でも、スマホで見ると特に問題はないのです。はて？？？原因「ページの読み込みに関する問題」の「詳細を表示」すると原因が見えてきました。どうやらスタイリングに使用するcssやjsといったスタティックアセットがテストの際に読

22 Dec, 2020·2 min read

WordPressをDocker上でWP-CLIで実行する

WordPressのローカル開発環境の手段として、WP-CLI（WordPressを管理するためのコマンドラインツール）をDocker Desktop上で実行しWordPressを動かす方法を取ってみました。手順を書き残しておきます。利用環境私が利用した開発環境は以下になります。 * Windows 10（WordPressはDocker上で動かすのでホストOS依存しないと思います） * wordpress-herokuのプロジェクトを利用 ※wordpress-herokuとはBedrockをベースにしたWordPressをHeroku上で動かすことを楽ちんにしてくれるプロジェクトです。この手法を取った背景そもそもwordpress-herokuプロジェクトはローカル環境でもWordPressを動かすための手順を用意しており、こちらのWikiに記載されております。にもかかわらず、なぜわざわざDocker上で動かすのかというと、RedisやMySQLもローカル用に環境を用意したいってなった時に楽そうかな、と思ったのがまず一点。そして、

14 Dec, 2020·2 min read

Herokuで"at=error code=H14 desc=No web processes running"エラーになる件

HerokuにDockerコンテナ（Webサーバー）をデプロイした際に、"No web processes running"エラーが発生してしまいました。原因や解決方法について調べたので、内容をメモします。事象 HerokuにDockerコンテナ（Expressを利用したWebサーバー）をデプロイした後、ページを開いてみるとApplication errorが発生しておりました。サーバーログをheroku logs --tailで確認してみると、以下のように"No web processes running"とのエラーが出力されておりました。 2020-12-06T06:05:22.736018+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/" host=jiko-album-artwork-backend.herokuapp.com request_id=33285f21-ed78-4733-b3d4-1214031f1d

11 Dec, 2020·2 min read

TypeScriptチートシート

TypeScriptの実行環境の準備 TypeScript を始めるために必要なパッケージをインストールする $ npm install -g typescript ts-node パッケージ概要typescriptTypeScriptコンパイラ（トランスパイラ）ts-nodeTypeScriptのコンパイルと実行を一つのコマンドでできるCLIツールインストール後は、以下のコマンドを実行してインストールされていることを確認する $ tsc --version Version 4.0.3 ※tscは typescript の短縮名 TypeScriptを実行する TypeScript のコードを実行してみる hello.ts function hello(name: string): void { console.log(`Hello ${name}!`); } hello('kojimaru'); 上記ファイルを用意し、以下のコマンドを実行する $ tsc hello.ts するとhello.jsが作成され

06 Dec, 2020·< 1 min read

FiddlerでBasic認証のプロキシ環境を構築する

FiddlerはHTTP/HTTPS通信をキャプチャーするツールとして有名ですが、端末のプロキシサーバーとして使用することができ、疑似的なBasic認証の環境を構築できます。FiddlerをBasic認証サーバーとして環境構築する手順をまとめてみました。設定方法前提： * Fiddlerがインストール済みの前提となります。インストール手順は色々なところで掲載されているので割愛します（以下が参考になると思います）。 * https://qiita.com/taketakekaho/items/397bc6e9afa32329edd0#特定のブラウザ通信やページのみにフィルタする * https://www.ipa.go.jp/files/000077215.pdf * Fiddler Classic を利用してます（最近はFiddlerのページからインストーラをダウンロードするとFiddler Everywhereが落ちてくるようです）。手順： 1. まずBasic認証で使用するためのユーザークレデンシャル（ユーザー名とパスワード）を設定しま

10 Nov, 2020·2 min read

Nexus 5X (LG-H791) で楽天アンリミットを試してみた

Nexus 5X で楽天アンリミットにつなげるか試してみました。結論から言うと、以下の結果のようにデータ通信は利用できるものの、音声通話/SMSが一部利用できませんでした。楽天回線エリア（バンド3）パートナー回線エリア（バンド18/26）データ通信〇〇音声通話/SMS 〇 ×[1] 考察今回使用した Nexus 5X (LG-H791) の仕様は以下の通りです（こちらより一部抜粋）： * CDMA: 非対応 * LTE（FDD）: B1 / 2 / 3 / 4 / 5 / 7 / 8 / 9 / 17 /

13 Sep, 2020·< 1 min read

Xperia XZs 602SOで楽天アンリミットのパートナー回線が使用できない件

それは、先日実家に帰省するために下り電車の東海道線に乗って横浜駅を通り過ぎたときのことでした。あれれ？スマホが4Gにつながらない。。。いやいや、きっと基地局間でハンドオーバーがうまくいってないだけだよー、って思いましたが、その後も一向に4Gにつながらない。。。あとで調べてみたら、以下が分かりました。どうやら、私が使っている端末 Xperia XZs 602SO （2017年にSoftbankより購入）がパートナー回線（au回線）のバンドを受け付けていなかったようです。 Xperia XZs 602SOの対応周波数（4G LTEのみ）周波数帯バンドXperia XZs対応Note2.0GHzバンド1〇Softbank契約時はきっとこれ使ってた1.7GHzバンド3〇楽天回線エリア900MHzバンド8〇1.5GHzバンド11800MHzバンド18/26auプラチナバンド ※楽天パートナー回線エリアはこれ800MHzバンド191.5GHzバンド21700MHzバンド283.5GHzバンド42 つまり、楽天回線エ

07 Sep, 2020·2 min read

Boxのデバイストラストを使ってみた

Boxの「デバイストラスト」というログイン時に端末認証を行う機能を使用してみました。セットアップしたときに踏んだ手順を書き残しときます。ログイン端末上に、ルート証明書によって署名されたクライアント証明書が存在しているか確認を行う「オプション1 – デバイス固有の証明書の検証」のセットアップ手順になります。公式記事はこちら: https://support.box.com/hc/ja/articles/360044194993-デバイストラストのセキュリティ要件の設定 IT管理者側の事前準備 1. IT管理者がCA（「オレオレ認証局」でOK）にてルート証明書（後の手順で作成するクライアント証明書のルートとなる）を予め作成しておく openssl genrsa -out MyRootCA.key 2048 openssl req -x509 -new -nodes -key MyRootCA.key -sha256 -days 3650 -out MyRootCA.pem 2. Boxに管理者アカウントでログインし、管理コンソールに#1で作成した証明書（

05 Sep, 2020·3 min read

BIGINT(20) unsignedの桁数について

BIGINT(20) unsignedというMySQLのデータ型が何桁まで表現できるのか調べてみました。このデータをString型の変数に代入するときに何文字になるのか気になったのが発端です。カッコ内の数値は表示幅 MySQLデータベースを触っていて、ふととあるデータ型について疑問に思ったので、調べてみた。まず、こちらのテーブルのidというキーのデータ型をご覧いただきたい。 db> desc wp_table; +-------+---------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra

02 Sep, 2020·2 min read

ExcelでUnixtimeを日付に変換

ExcelでUnixtime（ユニックスタイム）を日付に変換する方法について紹介します。ウェブ検索で見つけた数式を何も考えずにそのまま使ったらうまくいかなかったので、方法だけでなく仕組みや注意点についても備忘録的に書き残しておこうと思います。 Unixtimeとはこの記事を読んでいる方は、Unixtimeとは何かご存知の上でここにたどり着いたのだと思いますが、結構重要なポイントがあるので見てみましょう。 Unixtimeとは、一言でいうとこういうやつです。 1598253617 そう、Unixtimeとは1970-01-01 00:00:00 (GMT)から何秒経過したかを示しています。よって、その秒数から日付を算出する計算式を組めば我々人間が直感的に理解できる日付の表示に変換できます。そして、重要なポイントが2つあります。 1. UnixtimeはGMTなので、日本時間が知りたい場合は時差を考慮する必要がある 2. Unixtimeは上の例のように10ケタとは限らずデータ型によっては13ケタや16ケタだったりする（ケタ数が増えるほど精度が良く、

30 Aug, 2020·3 min read