okumuraa1のブックマーク - はてなブックマーク

iOS対応のWebサイトでは、「ページ下部の隅に追従するボタン」を置いてはいけない - Qiita

PCのレスポンシブレイアウトで動作確認を行っていて、実機での動作確認を怠っているとハマる罠「ページ下端固定のボタン」の罠についてご紹介します。 iPhoneのMobile Safariにはデッドゾーンとか言われるものが存在します。画面を下スクロールしてアクションバーを消えている状態で、下端をタップすると「Safariのアクションバーを表示する操作」として認識されていまうのです。そして、意図していたタッチイベントは発火しません。ちょっと参考画像が縦に長いですがデッドゾーンがこんな風にあるイメージです。このアクションバーが現れるデッドゾーン、具体的には44pxらしいです。さらに、iPhone X系などのホームボタンのない機種ではセーフゾーンなんかも現れて当たり判定が奪われてしまうこともあるようです。詳しいことはこの記事が詳しいです。 iOS Safariのアクションバー表示エ

okumuraa1 2020/07/29

リンク

[サーバーサイドAPIデバッグ術]ブラウザのリクエストを簡単にリトライしてサーバーの挙動を見る方法 - Qiita

APIの開発してますか？挙動の確認を見る時どうしてますか？ curlを手書きしている？パラメータがないリクエストなら手軽で良いですね。 Postmanのようなツールを使っている？素晴らしい！ブラウザで実際に画面を表示している？うーん…それって繰り返したいとき大変なんじゃ…… とはいえ、ブラウザで実際に画面を表示すると、パラメータの組み立てが非常に楽というメリットがあります。認証情報付きリクエストとか組み立てるの大変ですもんね。ここで、ブラウザのリクエストをそのまま繰り返したり、ちょっとだけパラメータを組み替えられたら便利だと思いませんか？今回はそんな方法を紹介します。 cURLでコピーしてリトライする Chromeの開発者ツール（Windows F12、Mac Cmd + Opt + I)を開いてネットワークタブを開いてください。この状態で目的のページを開いてください。 Pres

okumuraa1 2020/07/07

リンク

VueにTypeScriptを導入する3つのやり方を比較してみた - Qiita

最近TypeScriptが熱いっていう話をよく聞きますね！っていうことで私もTypeScriptを導入するには何が必要なのか知りたくなりました。でも、Vue.jsにTypeScriptを導入する方法が現状では3つほどあります。 Class Style Component Vue.extend（後に知ったところObject Styleというらしい） Composition API(RFC) それぞれの方法の導入記事はよくありますが、それらを比較してみたくなりました。という内容のLTを半年ほど前にしたのですが、登壇資料はこちらです。 VueでTypeScriptを始める 3つのStyle/3 style to start vue with typescript - Speaker Deck 今回の記事について TypeScript運用経験がとても浅いので、比較しきれてないかもしれません

okumuraa1 2020/06/26

リンク

Laravel7からVue.jsを使う最短レシピ - Qiita

LaravelからVue.jsを使う最短レシピ - Qiita という記事を公開していたのですが、情報が古くそのままの手順で再現できませんでした。そのため、Laravel7用にブラッシュアップした記事を書きたいと思います。間違ったことが書いてあるとか、Laravelが新しくなってこの記事の通りにできなくなった等あればこの記事にコメントをいただけると嬉しいです。 Laravel から最短でVue.jsを使うインストールから動かして本番投入まで一通りっていうのが見つからなかったのでまとめてみます。知らないとわかんないよそんなの！みたいな罠がそこかしこにありました。 TL;DR Vue（やReact）が別のパッケージになったので自分でインストールする bladeテンプレートの修正とコマンドをいくつか実行すれば使える bladeのいじるとこ今回の環境 macOS Catalina PH

okumuraa1 2020/05/06

laravel
vue

リンク

[個人サイト/ブログ/Qiitaなど]ゆるふわにGoogle Analytics からSlackに通知したいと思ったら簡単だった - Qiita

*1 自分がCreate Reportしたときに自動生成されたIDをいれる Start Date を7daysAgoにすると直近1週間分からレポート生成、 Orderでソートです。今回は週次でレポートを生成してほしいのでScheduled Reportで週次月曜日を選択しました。 Spreadsheetの結果をSlackに通知したい Spreadsheetの結果をSlackに通知するにはGoogle App Scriptを使えば簡単にできそうです。私ははじめ、以下の記事を参考にしました。 Google Apps Scriptを使って、スプレッドシートの内容をSlackに通知する｜ Tips Note by TAM Slack通知の実際の処理はIncoming Webhookを使ったほうが簡単でした。 Slack での Incoming Webhook の利用 | Slack Send

okumuraa1 2020/03/31

リンク

vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita

Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、引っかかって躓いてしまう人にとっては大変な部分だと思うので、コードのどことどこに関連があるのか図解してみようと思います。まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。サンプルコードコンポーネントとストアのサンプルコードは下記になります。 <template> <div i

okumuraa1 2019/03/07

リンク

はてなブックマーク

タグ

ブックマーク / qiita.com/fruitriin (6)

お知らせ

今週のはてなブックマーク数ランキング（2024年8月第1週）

月間はてなブックマーク数ランキング（2024年7月）

今週のはてなブックマーク数ランキング（2024年7月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス