Webエンジニアのブログ

YouTube ショートやHTMLのvideoタグなどで縦型動画を読み込む場合、そのまま埋め込みコードを読み込んでもレスポンシブWebデザインに対応していないので、CSSでアスペクト比の調整などが必要になります。ここでは、YouTube シ...
続きを読む>>

より良いUI/UXを意識するのであれば、JavaScriptによるプログラムの実装もユーザーの環境に合わせることが求められますが、matchMediaメソッドを使うことでメディアクエリや表示領域のリサイズの判定、hover動作のデバイスの判...
続きを読む>>

CSSの:hover擬似クラスを利用したhoverアクションの実装は、モバイルデバイスでは予期せぬ動作を起こすことがあります。ここではhover関連のメディア特性を利用してhoverが動作するデバイスを判別し、hoverが動作するデバイスに...
続きを読む>>

HTMLのvideo要素で動画を扱っていく場合、ファイルサイズの大きい動画データは読み込みに時間がかかるため、Webページのパフォーマンスに影響を与えます。ここでは、video要素で動画データを遅延読み込みする方法について、コントロールパ...
続きを読む>>

JavaScriptで配列でデータを管理して扱っていく中で、配列に格納されている文字列から、対象の文字列が含まれているかどうかを判定したい場合は、some()メソッドがとても便利です。引数に指定したコールバック関数で評価を行うので、複数のオ...
続きを読む>>

Pythonの開発はライブラリを使っていくことが多いので、開発に必要なライブラリをインストールしたり、複数のライブラリを管理していくことはよくあります。ここでは、Pythonのライブラリをインストールする方法についてご紹介します。...
続きを読む>>

WebのデバッグなどでiOS Simulatorを起動しようとしたところ、「Unable to boot the Simulator」というエラーメッセージが表示されて、シミュレータが起動しないことがあります。このような問題はシミュレータの...
続きを読む>>

Python開発を進めていく中で、セキュリティ面での向上や利用できる構文や機能が新しく追加されたりするので、より最新のバージョンを利用していきたいところです。ここでは、WindowsやMacで最新バージョンのPythonを利用する方法から、...
続きを読む>>

WebサイトやWebアプリケーションなどWeb開発で便利に活用できるiOS Simulatorでは、最新バージョンや古いバージョンのOSやデバイスなど、様々な環境でデバッグや動作確認が行えます。ここではiOS Simulatorで扱...
続きを読む>>

PHPでユーザーが利用しているデバイスを判別して処理を切り分ける場合は、スーパーグローバル変数を利用して情報を取得して処理をします。ここでは、PHPでのユーザーのデバイス判別を、これまでのHTTP_USER_AGENTとUser-Agent...
続きを読む>>