明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

Let's Encrypt の証明書インストールがすごく簡単になっていた

久しぶりに Let's Encrypt の証明書インストールをやったら、手順が非常に簡便になっていました。
certbot-autoというシェルスクリプトが基本的に全部やってくれます。
以下、その流れについてまとめます。

続きを読む

jQuery で CSS の filter プロパティをアニメーションさせる

CSS の filter 機能は非常に多くの便利な効果を持っているので、スマートな WEBデザインを実現するのによく使われています。
例えば、ぼかしを入れたい場合は以下のように書くことができます。

.blur {
  filter: blur(20px);
}
続きを読む

前回のバックグラウンド移行が特定の時間より前なら Scene 移動する

最近cocos2d-xをいじる機会が多いです。
アプリ開発は、国内ではUnity一択な風潮がありますが、2Dメインだとか、WebViewメインなアプリの場合、cocos2d-xで開発したほうが楽な場合も多いなと思います。
今回は、前回のバックグラウンド移行(アプリを起動したまま閉じる)が特定の時間より前だった場合、次回のフォアグラウンド移行(閉じたアプリを開く)で別の Scene に移動する場合のコードを書いてみたいと思います。

続きを読む

ウェブビューアプリの表示領域が iPhone X で崩れる問題

ウェブビューをベースにしたアプリの表示領域が、iPhone X だと崩れてしまう場合があります。
早い話が、ウェブビューの表示領域内に余計なスクロールが生まれ、CSSなどで固定させても動かせてしまうような状態になります。
これは iPhone X で刷新された表示領域の概念の違いによって起きているようです。

こんなときは、とりあえずウェブビュー内のHTMLの<meta name="viewport" />content="viewport-fit=cover"を追加してやります。

<meta name="viewport" content="width=640,height=1136,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover" />

こんな感じですね。
これでウェブビュー内の表示が固定されます。

jQuery の animate で背景色をアニメーションする

jQuery の animate メソッドは、CSSプロパティを指定することで徐々に変化するアニメーションを実現することができます。
ただ、color や background-color などの数値ではない値を持つプロパティの場合、アニメーションさせることができません。
jQueryjquery-color というプラグインを用意しており、これをロードすることで color / background-color などもアニメーションさせることができるようになりますが、ほかにも多くのメソッドを含んでいます。
単純にアニメーションさせることがけが目的なのであれば、以下のコードを埋めてやるだけで使えるようになります。

続きを読む

次の月曜日、前の日曜日を計算する方法

備忘録です。
PHPで次の月曜日や前の日曜日を計算する方法をまとめます。

次の月曜日

  • 現在が日曜日なら翌日
  • 現在が月曜日なら当日
  • 現在が火曜日~土曜日なら翌週の月曜日
if (date('w') == 1) {
  // 今日が月曜日
  $next_monday = date('Y/m/d');
} else  {
  $next_monday = date('Y/m/d', strtotime("next Monday"));
}
続きを読む

swiper.js でスライド内に overflow を置いた場合スライド中前面に出てしまう問題

swiper.jsという Javascript ライブラリがあります。

Swiper - Most Modern Mobile Touch Slider

WEBサイト中にスライドを埋め込めるライブラリは数多くありますが、swiper.js はオプションが非常に多く、柔軟な実装が可能なため、気に入って使っています。
これを使ってハマったことを今回まとめてみます。

続きを読む