はてなブックマーク

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

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

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

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

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近TypeScriptが熱いっていう話をよく聞きますね！ っていうことで私もTypeScriptを導入するには何が必要なのか知りたくなりました。 でも、Vue.jsにTypeScriptを導入する方法が現状では3つほどあります。 Class Style Component Vue.extend（後に知ったところObject Styleというらしい） Composition API(RFC) それぞれの方法の導入記事はよくありますが、それらを比較してみたくなりました。 という内容のLTを半年ほど前にしたのですが、登壇資料はこちらです。

プルリクエスト（以下PR）のレビューでフィードバックを返し、修正されたものを再度チェックすることってあると思います。 その時、前回見たときの差分を確認できたら便利なんじゃないでしょうか？ 実はそれ、簡単にできるんですよ ってドヤ顔で書いたらコメントでもっと便利な方法がある と教えていただきました。 プルリクの Files changed タブにある「コミットを選択するプルダウン」で Show changes since your last review を選択すると、前回レビュー時からの差分を見ることができます まあ /compare/ 自体はPRに関係なくGitHub上で使えるのでこの記事はこのままにしておきます。 /compare/[branch or hash]...[branch or hash] にアクセスする [Comparing c5d4b6e\.\.\.sample4/in

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

ただのページ遷移をしたいだけなのに、（主に手抜きという）実装の都合で JS の location.href になってることはありませんか？ 実はそれ、体験を損ねているかもしれませんよ。 起こる出来事 マウスのホイールクリック（ミドルクリック）で別のタブで開けません。 Mac にはマウスホイールなんてついてないだろ？ 実は Cmd+クリックも同様に別のタブで開けないんですよ。 スマホだったら長押しに相当すると思います。 したがって、意図して別タブで開かせたくない場合を除いて、location.href での遷移は避けるべきです。 厳密には JS の処理内での遷移させるのを避けよう、というべきですね。 なので Router の API を直接コールしての遷移も同様です。 できるだけ <a href="url"> になるようなコードが望ましいです。 SPA（React, Vue, Angular

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

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

この記事の主なターゲットはReactから入った人や、仕組みが分からないと怖くて分からないと怖くて使えないという人と、フォーム部品のコントロールの記載方法をよく忘れる人向けの記事です。 また、上級者向けとしてカスタムコンポーネントへのv-modelの利用方法も書いてみました。 先日「Vueの双方向バインディングがよしなにやってくれすぎててよくわからない」という相談を受けました。 これはおそらくVue.jsから入門した人や、Vueって簡単じゃん、便利じゃんと飛びついた人にとってはよく分からない感覚かもしれませんが、言われてみればなるほどv-modelは多くのことをやっています。 間違ってることとか足りないこととかあったらコメントとか編集リクエストください それでは処理の概要を見ていきましょう。 v-model の概要 v-model=hoge は v-bind:value="hoge" と v

あなたの所有しているサイトやブログ、あるいはQiitaにGoogle Analyticsって入れてますか？ （実はQiitaにもGAを導入できると @sapi_kawahara に教えてくいただきました！） 多分、入れてる人は多いんじゃないかと思います。 ではそのレポート、どれぐらいの頻度で確認してますか？ サイトの運営規模にもよりますが、私は一週間スパンで知りたいと思っています。 が、自分で都度見に行きたくはありません。 忘れますよそんなの。面倒だし。 できればレポートの結果だけを文字（表）でサクッと見れたらとっても嬉しいなーと思いました。 でもそんな方法あるんでしょうか？ あるんだなこれが。 意外と 出来るって知ってさえいれば 簡単（当社比）にできたので、参考になるリンクをばばっとまとめてみました。 Google AnalyticsのレポートをGoogle Spreadsheet に落

補足：営業と書いているがマーケティングでは？という指摘があって本当にそう さらに追記：読み直したらやっぱり本書の文脈では営業だった 受託企業から自社プロダクト系の会社に転職した私。そんな私に入社初日に課題図書として渡されたのはプログラミングに関わる本や組織に関わる本ではなくビジネス系書籍でした。 手持ち無沙汰な時間もあり、折をみて読んでいたのですがこれがまあ営業の用語がよくわからない。面白いのでモッタイナイ！と思ったので用語集を作ってみました。 ちなみに本記事は「ザ・モデル」を読んだ際に作った用語集であり、本書に出てこなかった用語はカバーしていません。また並び順についてはカテゴリ順ではなく概ね登場順です。 （やっぱりあとで登場して意味がわからなかった、対義語は近い方がよいなどの理由で順番が前後していることはある） これから「ザ・モデル」を読む人は本記事を上から眺めた上で、本を読んで用語がわ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシ

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

Mac(Mojave)でPHPをビルドしようとしたらかなり行き詰まったので、 ついでに出てくるErrorとWarningを片っ端から書いてみようじゃないかという記事。 今回はPHP7.3.0, 5.6.40, 5.5.38をビルドします。 この辺りがインストールできれば7.2, 7.1, 7.0, 5.4はインストールできるみたいです。 5.3.xはビルドできないのですがそれについては省略。 TL;DT 列挙したら本当に長くなったのでまとめました。 これのコピペで大丈夫だと思います。 # php7.3.0のビルドに必要 brew install bison re2c libxml2 libjpeg libpng icu4c libzip autoconf automake echo 'export PATH="/usr/local/opt/bison/bin:$PATH"' >> ~/.b

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

誰も書かないような凡ミスをあえて書く Vue.jsめっちゃ好きなんですけど、最初の頃はググってもよくわからない変なミスでハマることがあったので、あえてそれを書いていこうと思います。 ちなみにこの記事は私がハマったVue.jsのショボいミス - GitPitch というLTで発表した内容を、整理した内容です。 なんかよくわからんけど動かない（2019/04/22追記） ホットリロードがあるから大丈夫！と全面的に信用しないでください。 リロードしたら直ることがあります。 細かい理由は後述。 ちょっといじったら突然画面いっぱいにエラーが表示された デカいわ黒背景の白文字だわでビビりますが、落ち着いてメッセージを呼んでください。 このオーバーレイはコンパイルエラーなので、どこかに間違いがあるはずです。 そして、だいたいの場合はどこがエラーの原因なのかもちゃんと書いてあります。 タグを足したらエラー

以下古い情報です この記事は2018年3月に書かれた記事で、Laravel5.4をベースに記載しています。 （執筆時点では2020年4月ですが）今からこの手順通りにはできませんので、こちらの記事に移動してください。 Laravel7からVue.jsを使う最短レシピ - Qiita Laravel から最短でVue.jsを使う インストールから動かして本番投入まで一通りっていうのが見つからなかったのでまとめてみる。 知らないとわかんないよそんなの！みたいな罠がそこかしこに。 TL;DR bladeテンプレートの修正とコマンドをいくつか実行すれば使える bladeのいじるとこ クローンしたら割りといい感じになるリポジトリつくった fruitriin/laravel-vue-example 今回の環境 macOS High Sierra PHP 7.2 (composerがインストールされている

HerokuでSPAアプリ作っててビルドしたjsとcssをコミットしたくない話 全体の構成として、バックエンドとログインせずに歩き回れるフロントはLaravelで、 ログイン後の画面についてはVueでSPAみたいな挙動をさせるWebアプリを作っていたときのことです。 デフォルトのLaravelプロジェクトって、.gitignoreにpublic/jsとpublic/cssが入ってないんですよ。 くっついてるVueのコンポーネントを書き換えていて、ちまちまビルドしたりすると、 当然public/jsやpublic/cssの下にファイルが作られます。 それをGitにコミットしてHerokuにデプロイとかしていて、まあ動くわけなんですけど、 ビルド前のリソースに変更がなくてもビルドするたびに差分がでてしまうんです。 これはちょっとイケてないぞ、ということで、 .gitignoreにpublic/

Macに移行したけどタスクバーが恋しい話 かれこれもう15年以上Windowsを使っていたのですが、 開発者的にはWindowsつらくね？ということで、この度ついにMacを購入して全面的に移行しました。 当然なのですが、細かいところであれこれ気になります。 そのうちにMac風のスタイルに慣れるとか、カスタマイズしてWindows風に寄せるとかして、徐々に順応してきました。 しかし、どうしても我慢できなかったことがひとつ。 Windowsのタスクバーです。 Macのそれにあたるものといえば、これは当然Dockですが、 これが納得できません。 ひとつのアプリを複数ウィンドウ開いてウィンドウが隠れると、 どこいったかわからなくないですか？ ということで、何かいいものはないものか半年間に渡って、 たまに調べては見つからず諦めて、を繰り返して……ついに見つけました！ uBarです！ ubarのご紹介