UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

WebAPI

【WebAPI】URIの2つの仕様

ある検索フォームを実装したところQAの人から「? 」を含むキーワードの検索がおかしいと指摘があった すぐにURIエンコードが必要だとわかってencodeURIComponentを使ってキーワードをエンコードしてOKが出たのだが「他の記号は大丈夫なんでしょうか?」とい…

【WebAPI】Navigation API

JackさんのNavigation APIの記事を読んで痺れた blog.jxck.io Navigation APIとは SPA(シングルページアプリケーション)の履歴管理について、既存のwindow.historyAPIを使った方法ではいくつかの問題がある 例えば、iframeの中の遷移履歴も含まれてしまっ…

【WebAPI】クリップボードにコピーする実装を更新する

あるサイトでクリックしたらクリップボードに保存することをJavaScriptで実装していたが、その時のAPIが非推奨になっているのに気づいたので更新したい 非推奨になっているAPIはこれ document.execCommand("copy”) developer.mozilla.org これを以下の書き方…

【JavaScript】JavaScriptでスマホのキーボード操作の落とし穴

スマホで入力フォームにフォーカスインするとスマホのキーボードが表示される このとき、入力して各キーボードの右下の決定ボタン(iOSならreturn、Androidなら矢印)をクリックしたときの制御をしたい 具体的には、この入力フォームがformタグの中にあり、…

【WebAPI】LocalStorageに格納できるmaxサイズ

LocalStorageに格納できるmaxサイズを知らなかったので調査 一つのkeyに何バイトまで格納できるのかを下のHTMLをつかって確認した(headとかは省略) setIntervalで100KBずつ文字列を増やしていって、何バイトでエラーが発生するか <button onclick="start();">実行</button> <script> var storage = wind…

【WebAPI】ページがリロードされたのかを判定する

Yahoo!ニュースの取り組み事例でブラウザバックの最適化の話が記事になっていた t.co この中で、キャッシュした記事リストをリロード時に破棄するため、performance.getEntriesByType()を使ってリロード判定する方法が紹介されていたが、performance.getEntr…

【WebAPI】URL API

これまでURLからクエリパラメータを取り出すときに外部ライブラリのquery-stringを使っていたが、IE対応をしなくて良いということになったのでURL APIが使えるようになった developer.mozilla.org 基本的な使い方として、以下のようにURL オブジェクトを作成…

【WebAPI】scrollToでページ内スクロール

ページ内のあるセクションにidを付与しておき、ボタンをクリックしたらその位置までスクロールする機能を作りたい jQueryを利用していた時代ではanimateをつかって次のように実装していたが const $target = $('#js-scroll-to-target'); if (!$target) { ret…

【WebAPI】URI設計 - 単数形か複数形か

WebAPIを設計するときに以下のようなエンドポイントを用意したい idを指定して、単一のリソースを返す queryを指定して、単一のリソースを返す idを複数指定して、複数のリソースを返す 例としては、地図上で表す東京タワーなどのランドマークのリソース(名…

【WebAPI】日付のプロパティ値

あるWeb APIの設計をレビューしているときに、日付のプロパティに対して date: YYYY年MM月DD日 time: hh時mm分 とフォーマットされた文字列で返すと記載されているのに気付いた フロントエンド目線だとこのようにフォーマットされた状態だと厳しい 例えば、…

【WebAPI】stopPropagation、preventDefault

モーダルなどのメインコンテンツの手前に表示するコンテンツをクローズする時に、奥にあるメインコンテンツのイベントが実行されてしまった 原因はevent.preventDefault()とevent.stopPropagation()を間違えて実装していたため preventDefaultはリンクの遷移…