はてなブックマーク

実際に動かして挙動を調べる 全イベントを仕込んだテストページを用意しました。 各ブラウザで実際に動かして発火条件を調べます。 https://zprodev.github.io/interaction-event-test/#default 使用ブラウザ Chrome 72.0.3626.28 beta Chrome for Android 71.0.3578.99 Firefox 64.0.2 Safari 12.0.2 iOS Safari 12.0 （Windows系は追って・・・） pointerdown Chrome Element上でマウスのボタンを押した時。 Chrome for Android Element上でタッチを開始した時。 Firefox Chromeと同じ。 Safari 非対応。 iOS Safari 非対応。 pointerup Chrome Element

もうじきiOS13、iPadOSが一般公開されますね。 みなさんは自身のサービスで動作確認済ませてますか？ この記事では自分が観測した要注意事象と、それに対する対処を紹介します。 ※ iOS13 beta8時点の情報です。 要注意 プライベートモード判定の裏技が使えなくなった プライベートモード判定しているサイトは要注意です！！ Apple Developer Forumsにもある内容ですが、iOS11とiOS12では下記のコードでWebSQLがエラーになる場合はプライベートモードと判定することが可能でした。 var isPrivate = false; try { window.openDatabase(null, null, null, null); } catch (_) { isPrivate = true; } しかし、Safari13ではWebSQLのサポートが終了し、プライベ

GitHubのcommitログと共に変更箇所を説明します。 ActionBarを消す アプリのテーマをDarkActionBarからNoActionBarに変更することで、ActivityのActionBarを消しています。 TWAのステータスバーにテーマカラーを反映 元はTWAサポートライブラリで提供されているLauncherActivityをそのまま使用していましたが、LauncherActivityを継承した自前のActivityを使用するよう変更し、ChromeCustomTabのIntentを生成しているメソッドをオーバーライドします。 https://github.com/zprodev/QR-TWA/commit/fb93ee7b87827627f03e7258904333003f3cec7b その上で、リソースとして定義済みのcolorPrimaryDarkをsetTool

先日「GooglePlayストアでPWAが配信できるようになった！」という記事が話題になっていました。 Google Play Store now open for Progressive Web Apps 😱 実態は「Chrome72で実装されたTWA (Trusted Web Activity) を使用することで、URLバー無しでPWAページを開かせるAndroidアプリを開発できるようになった」という事です。 検証がてら実際にTWAでPWAをGooglPlayストアに公開してみたので手順を紹介したいと思います。 実際のAndroidプロジェクトはGitHubでも公開しています。 https://github.com/zprodev/QR-TWA 環境 AndroidStudioはver3.3.1を使用します。 公開するPWAはこちらのQRコードリーダーです。 https://qr.

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事は個人開発 #2 Advent Calendar 2018の11日目です。 昨日は @yuji_saito さんの　「ファンサイトの個人開発と、片手間運用のためのRPA」 でした。 作ったもの 9 SLICER https://zprodev.github.io/9-slicer/demo/ ドラッグ&ドロップで9スライス画像をサクッと生成できるWebアプリです。 全てフロントのJavaScriptで処理してます。裏で画像抜いたりしてないので安心してご利用ください。 生成した画像は、Unityなら9SliceSprite、Webサイトならborder-image、 HTML5ゲーム界隈ならPixiJSでNineSlicePlaneとして使用できます。 9 SLICER の使い方 ↓の点線内に こんなPNG画像をドロップすると スライス後の画像が下にプリッと出てきます スライス結果と

npmのorganizationアカウントを作成するタイミングがあったので、調べた内容をメモとして残します。 0. organizationアカウントとは 企業やプロジェクトなどの組織として、npmのパッケージ管理を行うための仕組み。 組織名をスコープ（namespace）としたパッケージの作成や、有料プランを使用する場合の支払いの一元管理が可能となる。 Googleのorganizationページ https://www.npmjs.com/org/google @googleをスコープにしたmapsパッケージ https://www.npmjs.com/package/@google/maps 1. organizationアカウント作成方法 1.1 個人アカウントの用意 organizationアカウントは個人アカウントをベースに作成する。 ということで、まず個人アカウントが必要とな

GitでPrivateなリモートリポジトリを作ってプロジェクトのバックアップ&バージョン管理をしたい！ でもなるべくコストはかけたくない！ ということで以前から借りていたさくらレンタルサーバーにリモートリポジトリを作成し、GitクライアントのSourceTreeを使ったバージョン管理環境を作成しました。 まず準備 さくらレンタルサーバーのスタンダード(月額515円)以上のプランを契約します。 ライトだとsshが使えないのでダメです。 SourceTreeもダウンロードしておきます。 SourceTreeでローカルリポジトリ作成 ポチポチっとディレクトリを指定するだけで簡単です。 空のディレクトリを作って始めても良いし、作成済みプロジェクトのディレクトリを指定してもOKです。 これでgit_testという名前のローカルリポジトリが作成できました。 ローカルでのバージョン管理であればこれだけで

HTML5でゲームやリッチなコンテンツを作る上で欠かせない「Web Audio API」 しかしコイツがなかなか・・・モバイルでの特殊実装やメモリ使用量まわりで色々と闇を抱えていて・・・ ということで闇を見つけ次第、検証結果や対処方法など記録を残していきます。 iOS SafariはBGMなどの自動再生ができない iOS Safariは以下ようなコードでサウンドの自動再生ができない const AudioContext = window.AudioContext || window.webkitAudioContext; const ctx = new AudioContext(); const request = new XMLHttpRequest(); const url = 'https://zprodev.github.io/web-audio-test/assets/Campf

これは ドリコム Advent Calendar 2017 の11日目です。 10日目はhisano1210さんによる、『デザイナーへターミナルのすゝめ』です。 はじめに 自分の所属しているチームではブラウザゲームのフロントエンド基盤開発を行っています。基盤として提供するとなると品質は重要ですよね。 特にモバイル向けとなると実機でのパフォーマンスなどシビアに見る必要があります。 という訳で、パフォーマンスなどの品質を定量的に評価するために**【モバイル実機 × ブラウザ × 自動テスト】**の環境を構築しました。 業務で構築したものは複雑なテストや複数台の端末を使用するためなかなかヘビーな仕上がりですが、できる限りシンプルでミニマムな構成に整理したうえで、モバイル実機でブラウザ自動テストが行える構成をご紹介します。（使用モジュール等の詳しい説明は割愛します。インストールの項目などで公式サイ

{ "private": true, "scripts": { "start": "npm run mkdist && npm run cpassets -- -w & npm run cphtml -- -w & webpack-dev-server", "build": "npm run mkdist && npm run cpassets && npm run cphtml && webpack --optimize-minimize", "mkdist": "rimraf dist/ && mkdirp dist/", "cpassets": "cpx 'assets/**/*' dist/", "cphtml": "cpx src/index.html dist/" }, "dependencies": { "babel-polyfill": "^6.26.0" }, "devD

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

9/29のLINE DEVELOPER DAY 2016に参加したところ、こんなに豪華なお土産をいただきました。 オシャレなタンブラーも嬉しいですが、何といってもこれ！ LINE Beacon！！（基盤むき出し！！！） ってことでワクワクしながら帰ってさっそく試してみました。 #まずLINE BOTを作成する LINE BUSINESS CENTERの「Developer Traialを始める」からBOTの作成を進めます。 https://business.line.me/ja/services/bot 今回のDEVELOPER DAYと同時にLINE BOTの正式版が発表され、APIも新しくなったようですが、LINE BOTの設定についてはトライアル版とさほど変わってませんでした。 BOTの設定に関しては他の方が詳しく記事を書いてくれているので割愛します。 (後で必要になるので、Webh