はてなブックマーク

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

キーボード ショートカットのリファレンス | Chrome DevTools いい感じの数値やスタイルになったらコードへペースト！ HTMLの編集 エレメントタブの右クリックメニューのEdit as HTMLでHTMLが編集できます。 Enterだと改行になりますがEscではキャンセルになるので気をつけてください。 確定は[Win]Ctrl/[Mac]Cmd + Enterです。 Thx @sanfrecce-osaka ElementタブのDOM操作系ショートカット Ctrl + Cで選択要素がクリップボードに入ります。 Ctrl + Vで貼り付け、Deletキーで削除できます。 属性をダブルクリックしたり、内部テキストをダブルクリックすると編集状態にできます。 要素を増やした場合のレイアウトや空だった場合のレイアウト、 中の文字数が多い時のレウアウト確認にお使いください。 まとめ リロ

「イメージでいうとサービス名web決め打ちにして dcw exec bashとかしたい。エイリアスだと引数の順番のせいでできないし…」 「それ独自関数できるよ」 「マジっすか」 これがだるいので

それ debugger文 でできるよ 開発者ツールを開いていれば debugger とコードに書かれたところが実行された瞬間で止まってくれます。 コードに直接記載できるブレークポイントみたいなものですね。 （開発者ツールを閉じていると特に何も起きません） debugger - JavaScript | MDN debugger ステートメントは、ブレークポイントの設定のような任意の利用可能なデバッグ機能を呼び出します。デバッグ機能が利用可能ではない場合、このステートメントは効果がありません。 debugger文のいいところ 昨今はトランスパイルが流行りなので、コンパイル済みコードにブレークポイントを仕掛けるのは面倒ですが、 この方法ならイベントで起動するメソッドなど、どんなところでも簡単にブレークポイントを貼れます。 変数の中とか見たいしメソッドも実行したい 止まっている時にconsole

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

最近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運用経験がとても浅いので、比較しきれてないかもしれません

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

Google App Script(以下GAS)、使ってますか？ Spreadsheetなんかにちょっとしたマクロ作るのとかに使うと思います。 ところでこのGASのオンラインエディタ、お世辞にも出来がいいとは言い難いですよね…… そんなに頻繁に使うわけではないから…と我慢していたのですが、いい加減に我慢の限界です！ そんな私や、あなたのために「google/clasp」というツールがあるので紹介です。 clasp をインストールする nodeの実行環境が必要です。 インストールがまだならインストールを済ませておいてください。 それではclaspをグローバルインストールしましょう（ローカルインストールでもいいですけど） clasp にログインする メインのブラウザが連携したいGoogleのアカウントにログインしていることを確認してください。 G Suiteのユーザー設定画面からGAS API

ただリンクにしたいときにhref="url"の代わりにonClick="location.href = 'url'"的なことをすると体験を損ねますHTMLアクセシビリティa11y ただのページ遷移をしたいだけなのに、（主に手抜きという）実装の都合で JS の location.href になってることはありませんか？ 実はそれ、体験を損ねているかもしれませんよ。 起こる出来事 マウスのホイールクリック（ミドルクリック）で別のタブで開けません。 Mac にはマウスホイールなんてついてないだろ？ 実は Cmd+クリックも同様に別のタブで開けないんですよ。 スマホだったら長押しに相当すると思います。 したがって、意図して別タブで開かせたくない場合を除いて、location.href での遷移は避けるべきです。 厳密には JS の処理内での遷移させるのを避けよう、というべきですね。 なので Rou

タイトルでもう目的を果たしました。 簡単な誤字脱字の発見や体裁の統一のため、textlintを使うとめっちゃ捗ります。 ESLintの自然言語版です。日本語もイケます。 カックさんに教えていただいて導入しました。 導入方法の解説はすでに有用な記事がたくさんあるのでそれらに譲ります。 textlint/textlint textlint と VS Code で始める文章校正 - Qiita この記事を参考に環境構築しました textlintで日本語の文章をチェックする | Web Scratch 文書執筆の指南書で解説されている問題点を textlint で発見する - Qiita 今は空のテキストと.textlintrcをコミットしたリポジトリをGitHubにPushしています。 私の現段階の.textlintrc はこちらです。 { "filters": {}, "rules": { "

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

*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

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

＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指

今日、Vueのコードを書いていて、ふと vm.$el の存在を思い出して猛烈に感動しました。 なので、Vueインスタンスから特定のDOM要素を参照できる方法を一覧してみようと思います。 ちなみに、途中までプロパティセレクタを使ったquerySelectorで、リストの特定要素を指定して意図通りに動いたものの……という顔をしてました 基本的に公式ドキュメントの API — Vue.js に書いてあることの引用です。 知ってマジ神だなって奴 vm.$el - コンポーネントのルートDOMを得る 型: Element Vue インスタンスが管理している ルートな DOM 要素です。 <template> <div class="hoge"> <p v-on:click="click">hoge</p> </div> </template> <script> default export{ met

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のご紹介