今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
以前Facebookのアプリケーションで採用されたことを皮切りに、ここ数年で多くのアプリケーションで使われることになったドロワーというナビゲーションについての考察です。 最近ネット上でも話題になっており、安易なナビゲーションへの採用が見直されているされているインターフェイスでもあります。しかしドロワーの必要性について疑うことは良いのですが、表面的にただドロワーを使ってはいけないという情報に左右されていては、安易なドロワーはなくなったとしても、次に安易なタブなどが量産されるということが予測できます。 UIに関わるデザイナーとしては、なぜドロワーが適していないのかということと同時に、どのような状況下であればドロワーが適しているのかは考え続ける必要があるでしょう。 ドロワーの歴史 まず名前の由来としては、たしか2013年にAndroidでナビゲーションドロワーのためのフレームワークが公開されたこ
Androidアプリケーションのアクションバーの左側に表示できるアプリケーションアイコンには、アップナビゲーションを設定することができました。新しくサポートパッケージに追加された、NavigationLayoutを使うことで、UPナビゲーションの代わりに画面左からニュッと出てくるメニューを表示させることができます。 このメニューをナビゲーションドロワーと呼びます。本エントリでは、ナビゲーションドロワーの使い方を紹介していきます。 ナビゲーションドロワーの使いどころ ナビゲーションドロワーは今の流行のUIだと言えるでしょう。さて、このUIはどのような時に効果的に利用出来るのでしょうか。たとえば、Androidにはトップレベルのアプリ画面を切り替える方法として、ナビゲーションドロワーの他にViewPagerとTabを利用したものがあります。このViewPagerとTabを利用したケースと、ナビ
これはY.A.M の 雑記帳: Android : Navigation Drawer を使うの補足記事であり、Support Libraryのr13で追加されたNavigation DrawerをActionBarSherlockで使う方法です。 ActionBarSherlockの現行バージョン4.3.1はNavigationDrawerに完全には対応していません。 Android2.3またはそれ以下のバージョンでNavigationDrawerを表示すると、indicatorの表示が"三"みたいなアイコンではなく、UP"<"になります。 これに対して、Adds ActionBarDrawerToggle compatible with ActionBarSherlockというPull Requestが存在するのですが、Jake氏曰くI can't add things like th
A fixed vertical icon menu that adjusts its size for smaller screens. A very simple lateral icon menu with a hover transition. The fixed menu has an example for how to use media queries to adjust the size of the icons for smaller screens. There is also an example class for an active item. The icon font was created with IcoMoon and the icons are by Matthew Skiles. The HTML <ul class="cbp-vimenu"> <
リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: position:relative 実装: display:table 実装: display:inline-flex デモ デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。 デモページ：幅780pxで表示 実装: display:inl
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
Android:UPナビゲーションをカスタマイズする
前回の投稿ではJellyBeanでのUPナビゲーションについて触れました。 今回は前回に残課題とした 「UPナビゲーションでparentActivityを起動するIntentに介入する」 の調査結果となります。 後述しますが、UPナビゲーションについてのより深い考察は下記サイトを参照。 ・BackとUPナビゲーションデザイン ・BackとUPナビゲーションの提供 ・UPナビゲーションについて ・タスクとバックスタック ●動機 AndroidManifest.xmlに定義されたActivity要素のparentActivityName属性で提供される UPナビゲーション。 しかし、デフォルトの挙動ではアプリへの要求を満たせない場合があります。 例えば、単に親Activityを起動するのではなく、起動Intentにextra値を持たせて親Activity の状態に関与したい場合などです。 ●拡
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![What is Web Hosting and How Does It Work? | Complete Guide [2020]](https://cdn-ak-scissors.b.st-hatena.com/image/square/23e24a9fcc02839b52c336530b552aa0128ebddf/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcreateaprowebsite.com%2Fwp-content%2Fuploads%2F2018%2F06%2Fwhat-is-web-hosting-how-does-web-hosting-work.jpg)
