iPhoneのホーム画面に終話アイコンを設置する

2022. 3. 30 (水) | iPhoneのホーム画面に終話アイコンを設置する はコメントを受け付けていません

当記事はiOS15.4(2022年3月末時点)の内容です。

iPhoneで通話を終了するには、電話アプリの終話アイコンをタップするか、電源ボタンを押せば通話が終了します。
しかし、通話中にホーム画面を表示させてしまうと、再び電話アプリの通話中画面を表示させるには画面上部の緑色の帯をタップする必要がありますし、スピーカーから音を出している場合は電源ボタンでの終話は利きません。
スマホの扱いが苦手な高齢の親などに使ってもらおうとした場合、地味にハードルとなります。
そこで、どんな状態でもワンタップで通話を終了できるよう、ショートカットアプリを使って終話アイコンをホーム画面に作成します。

以下、ショートカットアプリでの終話アイコン作成手順です。

(1) ショートカットアプリのアイコンを長押しし、表示されたメニューから “ショートカットを作成 +” を選択

(2) アイコン及びショートカット名を任意に変更

(3) “Appおよびアクションを検索” に “機内モード” を入力し、表示された “機内モードを設定” をタップ

(4) “機内モードをオンに変更” という項目が追加されるので、 “変更” の部分をタップし、表示されるメニューから “切り替える” を選択し、 “機内モードを切り替える” に変更する

(5) もう一度 “Appおよびアクションを検索” に “機内モード” を入力し、表示された “機内モードを設定” をタップし、同様に “機内モードをオンに変更” から “機内モードを切り替える” に変更する (“機内モードを切り替える” が2個並んだ状態)

(6) 三本線アイコンをタップし、 “ホーム画面に追加” を選択

(7) アイコンをタップして表示されるメニューから “写真を選択” を選択し、アイコンに使いたい画像を選びアイコンが変わったのを確認したあと “追加” をタップ (アイコンを変更する必要が無ければそのまま “追加” でOK)

以上で、ホーム画面に通話終了用のアイコンが作成されます。
任意でホーム画面下部のDockへ置いてもいいでしょう。

通話中にこのアイコンをタップすることで、1回目の機内モード切り替えで通話が強制的に切れ、2回目の機内モードの切り替えで機内モードの状態を元に戻す、という動作を行なっています。

今回使用したアイコン画像

iPhoneのホーム画面に終話アイコンを設置する はコメントを受け付けていません
iPhone by あけび

 EC-CUBE4の商品詳細ページでslickとそのサムネイルそれぞれにデバイスに応じた適切なサイズの画像を表示

2021. 2. 7 (日) | EC-CUBE4の商品詳細ページでslickとそのサムネイルそれぞれにデバイスに応じた適切なサイズの画像を表示 はコメントを受け付けていません
タグ:

ここで言う適切なサイズとはCSS等で指定する見かけ上の大きさのことではなく、画像そのもののファイルサイズを指します。
適切なサイズの画像ファイルに置き換えることで、通信容量およびロード時間を短縮することを目的としています。
また、初期表示では縮小したサムネイル画像を表示、レイアウトが整ったあと目的のサイズの画像に置き換えることで、ページ表示の体感速度の向上も果たします。

本対応を行なったページのデモ

■ 処理概要

1. 商品詳細画面を表示する際、slickとサムネイルには縮小した商品画像を表示しておき、ローディングが完了してレイアウトが整うまでの時間を短縮。

2. ページデータのロードが完了した時点で、あらためてslickに表示済みの小サイズの画像をデバイスに合わせたサイズの画像ファイルに差し替える。

■ 対応方法
前提

あらかじめこちらの対応を使用してEC-CUBEの html/upload/save_image/ ディレクトリに対して自動サムネイル生成が使用できる状態にしておく必要があります。
上記対応をしていない場合は、あらかじめ個別にサムネイル画像を用意しておき、以下の対応もそれに合わせて変更する必要があります。

手順 1

EC-CUBE4管理画面の コンテンツ管理 > ページ管理 > 商品詳細ページ より、detail.twig に以下の変更を行います。

{% block javascript %} という行が一箇所あるので、その行のあとに続けて

<script>
//---- スライダー実画像遅延表示
{
window.addEventListener('load', function() {
const images = document.querySelectorAll('img[data-originalsize]');
for(let i in images) {
const image = images[i];
if(typeof image !== 'object') continue;
const ls = Math.max(image.width, image.height);
const originalSize = image.dataset.originalsize;
const qs = originalSize.split('?');
if(typeof qs[1] !== 'undefined') {
if(/t=\d+/.test(qs[1])) qs[1] = qs[1].replace(/t=\d+/, 't=' + ls);
else qs[1] += '&t=' + ls;
}
else qs[1] = 't=' + ls;
image.setAttribute('src', qs.join('?'));
}
});
}
//---- スライダー実画像遅延表示 ここまで
</script>

を追記。

手順 2

同じく detail.twig 内

<div class="item_visual">
{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}
</div>
<div class="item_nav">
{% for ProductImage in Product.ProductImage %}
<div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
{% endfor %}
</div>

<div class="item_visual">
{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}?t=100&p" data-originalsize="{{ asset(ProductImage, 'save_image') }}?p"></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}
</div>
<div class="item_nav">
{% for ProductImage in Product.ProductImage %}
<div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}?t=100&p"></div>
{% endfor %}
</div>

に変更。
(青字部分を追記)

手順3

前提の項目で設置した thumbnail.php 内の

$resizeList = [50,100,150,200,250,300];

$resizeList = [50,100,150,200,250,300,400,500];

に変更。

サーバ上には各商品画像に対してそれぞれ画像サイズに応じたキャッシュファイルが作成されますので、サーバのディスク容量に余裕がない場合はご注意ください。

EC-CUBE4の商品詳細ページでslickとそのサムネイルそれぞれにデバイスに応じた適切なサイズの画像を表示 はコメントを受け付けていません
未分類 by あけび

 JavaScript UNIXタイムスタンプと日時の相互変換

2020. 8. 4 (火) | JavaScript UNIXタイムスタンプと日時の相互変換 はコメントを受け付けていません

以前Qiitaに投稿したもののJavaScript版です。

もちろんDateオブジェクトを利用すれば面倒な計算をすることなく相互に変換できますが、あえて自前で計算したい場合はどんな方法があるか、という例です。

UTCとの時差取得と引数省略時のデフォルト値(現在日時)取得にのみDateオブジェクトを使用していますが、それ以外のUNIX時間と日時の変換はDateオブジェクトのパーサーに頼らず自前で算出しています。

date2time()
渡した日付からUNIXタイムスタンプを返します。
引数: 年,月,日,時,分,秒,時差反映
引数を省略した場合は現在日時を使います。
時差反映は0が無し、1が有りでデフォルトは1です。

time2date()
渡したUNIXタイムスタンプから日付をオブジェクトで返します。
引数: UNIXタイムスタンプ,時差反映
引数を省略した場合は現在のUNIXタイムスタンプを使います。
時差反映は0が無し、1が有りでデフォルトは1です。

時差反映0の場合はUTCを基準とした日時での処理、1の場合は実行環境で設定された時差が反映されます。

スクリプト

使用例

タイムスタンプから年を算出する場合、目標の日数に達するまで年でループさせる力技なども考えられますが、このスクリプトでは4年、100年、400年といったグレゴリオ暦における閏年の節目の配分を調べることで年を導き出していますので、数年先、数万年先の結果を計算させたとしても負荷は変わりません。

JavaScript UNIXタイムスタンプと日時の相互変換 はコメントを受け付けていません
PC, ソフトウェア by あけび

 PHP 祝日取得クラス

2020. 7. 10 (金) | PHP 祝日取得クラス はコメントを受け付けていません
タグ: ,

日本の祝日を返すクラスです。

以前より個人的に使っていた処理がクラス化していなかった上、祝日定義の記述自体にも多重に三項演算子を多用していて少々メンテナンスしにくかったので、クラス化のついでにその辺も作り直しました。

春分の日及び秋分の日については簡易的な実装ですので、現在から遠い年では正しい値を返す保証はありません。

 使用例

インスタンス生成

new Holiday([$year])
year
年プロパティの初期値。省略、または0以下の値を渡した場合は現在の年で設定。

メソッド

年プロパティ変更
setYear([$year])
year
年。省略、または0以下の値を渡した場合は現在の年で設定。

1年分の祝日リストを取得
getHolidayOfYear([$year])
year
年。省略、または0以下の値を渡した場合は年プロパティの値を使用。
インスタンス内の年プロパティ変更はしません。

1か月分の祝日リストを取得
getHolidayOfMonth([$month])
month
月。省略時または範囲外の値を指定した場合は現在の月が使用されます。
年はインスタンス内の年プロパティを使用します。

戻り値のリスト形式変更
setResultType([$resultType])
resultType
戻り値の形式
0: 月、日をキーとした連想配列(デフォルト)
1: YYYY-MM-DD をキーとした連想配列

国民の休日及び振替休日の使用指定
setUseIndefiniteHoliday([$useIndefiniteHoliday])
useIndefiniteHoliday
0: 使用しない
1: 使用する(デフォルト)

 参考

「国民の祝日」について | 内閣府
昭和30年(1955年)から令和3年(2021年)国民の祝日 csv | 内閣府

PHP 祝日取得クラス はコメントを受け付けていません
PC by あけび

 WordPressのページ出力にETagを追加する

2020. 6. 15 (月) | WordPressのページ出力にETagを追加する はコメントを受け付けていません
タグ: ,

 ETagとは

HTTPレスポンスヘッダのひとつで、リソースの更新状況を示す識別子です。
主にブラウザのキャッシュに利用されます。

 ETagを利用したキャッシュ動作の概要

クライアント(主にWebブラウザ)が対象URLのキャッシュを持っていない場合

  • クライアントからサーバへリソース要求
  • サーバはリソースの更新状況に応じたETagをレスポンスヘッダに付加してリソースを送信
  • クライアントは受け取ったリソースを表示し、ETagが紐付けられたキャッシュを保存

クライアントがキャッシュを持っている場合

  • クライアントはキャッシュに紐付くETagIf-None-Matchとしてリクエストヘッダに付加した上で、サーバへリソース要求
  • サーバは受け取ったIf-None-Matchの内容と該当リソースのETagを比較し、一致していなければサーバ側の持つETagをレスポンスヘッダに付加してリソースを送信、一致する場合はリソースは送信せず、HTTPステータスコード304Not Modifiedを返す
  • クライアントは304 Not Modifiedを受け取った場合はキャッシュの内容を表示し、リソースであればそれを表示した上で該当するキャッシュも更新する

ブラウザキャッシュに関連するHTTPヘッダはETagの他にもいくつかありますが、ETagを利用したキャッシュは有効期限を指定するタイプのキャッシュと違い必要最小限の通信は毎回行なう反面、サーバ側でコンテンツが更新されたにもかかわらず古いキャッシュがいつまでも表示されてしまうといったトラブルも回避しやすくなります。

 WordPressをETag出力に対応させる

wp-blog-header.phpに対して以下の追記を行ないます。

動作としては、送信されるべきデータを出力バッファを介して横取りし、そのデータを元にETagを生成、クライアントからのIf-None-Matchの状況に応じて、通常通りデータ(とETag)を送るか、未更新を意味する304 Not Modifiedのみを送るかを振り分けています。

出力バッファを横取りするのにちょうどよい位置のアクションフックが見つからなかったので、プラグインではなくwp-blog-header.phpを直接書き換える方法をとっています。
WordPressの自動更新で度々上書きされるファイルでもあるので、できる限り少ない追記で対応できるようにしたつもりです。

もし他に出力バッファを扱うようなプラグイン等を利用していた場合はお互い影響してしまい正常に動作しなくなることも考えられますので、その場合はこのETag出力対応の使用は中止して下さい。

 ETagが出力されているか確認

大抵のWebブラウザにはデベロッパーツール(F12キーで起動できる場合が多い)がありますので、その中のネットワーク監視機能からそれぞれのデータのヘッダも確認することができます。
サーバから送られてくるレスポンスヘッダ内にETagのフィールドがあれば送信されてきています。

curlコマンドの-Iオプションでもレスポンスヘッダを確認できます。
WordPressはHEADリクエストされた場合は上記で変更を加えた部分に到達する前に処理が終了するようなので、-X GETオプションも付けてみてください。

一例

$ curl -I -X GET https://********.jp
HTTP/2 200
server: nginx
date: Thu, 18 Jun 2020 17:37:16 GMT
content-type: text/html; charset=UTF-8
x-powered-by: PHP/7.3.18
etag: "b3d0cb21d6686756a2f24a9311b2c467"
vary: Accept-Encoding

同じURLでありながらリクエストするたびETagが変化するようであれば、そのページには毎回変化する何かが含まれているということになります。
そのようなページであっても同じETagを出してしまってはキャッシュとして不適切ですので、それは正常な動作です。

ETagが付加されていることが確認できたら、そのETagIf-None-Matchで指定して再度リクエストしてみます。

$ curl -I -X GET -H "If-None-Match: "b3d0cb21d6686756a2f24a9311b2c467"" https://********.jp
HTTP/2 304
server: nginx
date: Thu, 18 Jun 2020 17:41:00 GMT

HTTPステータスコード304が返ってくれば、正常に動作しています。

 WordPressをETag出力に対応させたところで、どの程度恩恵があるのか

固定ページなど、長期間にわたって内容が変化しないようなページが多ければその分ネットワークトラフィックが減りますので、それなりに恩恵はあるかと思います。

表示内容に応じたETagを生成する都合上、送信する・しないに関わらずリソース(ページデータ)自体は生成しますので、サーバ側の負荷という点で見ればリソース分のトラフィックが節約できる以外はほとんど変わりはありませんが、ネットワークトラフィックの節約はとくに転送データ量に制限のあるモバイル通信などでは有用なのではないかと思います。

但し、ページ内容自体は変わっていないように見えても、そのページ内に例えばランダムに変わるおすすめページのピックアップや、コメントフォームにリロードのたびに内容の変わる認証コード系の隠しフィールドなどがあったりしてHTMLソースレベルでの変化があればETagも異なるものとなるため、その場合はキャッシュとしての動作は望めません。
ETagを使うことで恩恵のあるページがどの程度あるかを見極めながら利用を検討してください。

 参考

HTTPヘッダー | MDN
HTTPキャッシュ | MDN
ETag | MDN

WordPressのページ出力にETagを追加する はコメントを受け付けていません
WordPress by あけび