Next.jsアプリのローカライゼーション | POSTD
クイックサマリー ‐ 国際化ルーティングは、厳密にはNext.jsの新機能ではありません。（v.10以降搭載されています。）この記事では、この機能のメリットだけではなく、こうした機能を利用して最高のユーザ体験と円滑な開発者体験を実現する方法についても見ていきます。自己文書化コードやバンドルサイズの削減、さらにはランタイムエラーではなくコンパイル時エラーに興味のある方は、是非このまま読み進めてください。 開発中のアプリにおいて、ロケール（または国、あるいは両方）ごとにルートを設定したい場合、Next.jsで簡単に対応できるようになりました。プロジェクトのrootディレクトリにnext.config.jsがない場合、新たに作成してください。このスニペットからコピーしても構いません。 /** @type {import('next').NextConfig} */ module.exports
フロントエンドのテストは皆のためのもの | POSTD
テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
POSTDをGatsby.jsベースに変更しました | POSTD
POSTDの運用がリクルートからニジボックスに移管される際に、デザインのリニューアルと同時にコードベースをGatsby.jsに変更しました。 本記事では、運用移管に至るまでの過程を踏まえつつ、現在のPOSTDの構成を紹介します。 移管前のPOSTD 前述の通り、POSTDは株式会社リクルートのインキュベーション部門Media Technology Lab.（現新規事業開発部）で運用されていました。 最後に公開した記事は、2019年3月28日の「PHPはもうダメだ、PHP万歳！」となっています。 もともとはWordPressによる運用が行われていましたが、運用体制の関係で静的HTMLをFirebaseで公開する形式になっていました。 ニジボックスへの引き継ぎに伴い、記事の翻訳を始めとしたサイト運用を再開することになり、改めてCMSの形式に変換する必要が出てきます。 Gatsby.jsを選ぶ
React.jsのアプリにNeo4jの日付と空間のタイプを扱う | POSTD
Neo4j、Mapbox、React、Nivo Chartを使ってダッシュボードのアプリを構築します。 このシンプルなダッシュボードReactアプリは、特定の場所を示す円内で特定の期間内にレビューがあったビジネスを探すことができます。 こちらでお試しください。 概要 Neo4j 3.4は新たに空間と時間の機能をサポートしました。位置と日付というタイプを持ち、クエリで使用してインデックスに使えるようになっています。空間と時間の機能を備えたシンプルなアプリを構築するのはきっと楽しいでしょう。 本記事では、React.jsによるダッシュボードタイプのアプリの構築について段階を追って記していきます。アプリでは、特定の期間内の位置情報を使ってレビュー情報を持つビジネスを検索したり、レビューの総括に基づいた幾つかのチャートを表示させたりします。これから、新しい空間と時間のタイプを用いた neo4j-i
Q&A：人工知能の未来(前編) | POSTD
人工知能とは？ コンピュータに知的な動きをさせる方法の研究です。大ざっぱに言えば、コンピュータは間違ったことよりも正しいことをする範囲内において知的と言えます。正しいこととは、それがどのようなものであれ、最も目標を達成しそうなアクションであり、より専門的には、期待される効用を最大限に高めるアクションと言えるでしょう。AI（人工知能）のタスクには、学習、推論、計画、知覚、言語理解、ロボティクスなどが含まれます。 一般的な誤解 AIは特定の技術である。 例えば、1980年代や1990年代には、多くの記事がAIとルールベースエキスパートシステムを混同していました。また、2010年代においては、多階層の畳み込みニューラルネットワークと混同している例が見られます。このことは、物理学と蒸気エンジンを混同するのに、ある意味では似ていると言えるでしょう。AIは、機械における知性創造の一般的な 問題 を研究
くだらないAPIなんていらないよ – 2016年のウェブスクレイピング事情 | POSTD
ソーシャルメディアのAPIとそのレート制限は、あまり気分のよいものではありません。特にInstagram。あんな制限つきAPIを欲しがる人がいったいどこにいるんでしょうね？ 最近のサイトは、スクレイピングやデータマイニングの試みを阻止するのがうまくなってきました。AngelListはPhantomJSすら検出してしまいます（今のところ、他のサイトでそこまでの例は見ていません）。でも、ブラウザ経由での正確なアクションを自動化できたとしたら、サイト側はそれをブロックできるでしょうか？ 並行性を考えたり、さんざん苦労して用意した結果として得られるものを考えたりすると、Seleniumなんて最悪です。あれは、私たちが「スクレイピング」と聞いて思い浮かべるようなことをするためには作られていません。しかし、賢く作り込まれた今どきのサイトを相手にして、インターネットからデータを掘り当てるための信頼できる
Bit Torrentを使ってWebアプリでのサーバレスのデータ同期 | POSTD
忙しい人向け： こちらにデモ用の プログラム があります。 ここのところ、私たちのチームはたくさんの革新的なウェブアプリを作り、アプリ作成のための考え方を示してきました。 Airhorner 、 Voice Memos 、 Guitar Tuner 、 SVG-OMG がすぐ思い浮かぶでしょう。これらのWebサイトに共通しているのは、データを保管したり同期したりするためのサーバコンポーネントを持っていないことです。私たちはこれらのサイトを、Web上のある種のエクスペリエンスの例および実装リファレンスのために作成しました。ビジネス向けに作られる完全な”アプリ”を目指したわけではありません。 最近、新たなWebアプリのアイディアが浮かびました。Ben Thompsonの ポッドキャストの未来 に載っているポッドキャストにインスパイアされたのです。サイトを訪れて録音ボタンを押すというシンプルなポ
Scala使用歴5年のプログラマが、この言語とその環境に関する神話を解き明かす | POSTD
(注：2016/1/21、頂いたフィードバックをもとに記事を修正いたしました。) 『 Programming in Scala (Scalaでプログラミング) 』の初版を読み始めた（でも読み終えていない）5年前からJavaの代わりにScalaを使うようになりました。最初はテストの時に使用していましたが、すぐにちょっとしたユーティリティクラスでも使用するようになり、気付いたらプロジェクト全てで使用するようになっていました。 Scalaに対する不満は多く存在しますが、この記事は違います。これは非難するものではなく、むしろ称賛するものです。 Scalaに興味ある開発者や聞いたことがあっても詳しく見たことがない人、「スムーズなプログラミングの妨げになる」と思い使用を先送りしていた人のために書きました。もちろんScalaファンに読んでもらうのも、他の人にも紹介してもらうのも大歓迎です。 この記事は3
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
人間らしいGitのエイリアス | POSTD
断固としてコンピュータ言語を拒絶する 私の知っている最も一般的な .gitconfig は、ユーザ名の設定だけが記されたものです。そして、その次に一般的なものはこれです。 [alias] ci = commit cia = commit -a cam = commit --amend cama = commit --amend -a cl = clean cldf = clean -df res = reset resa = reset HEAD ... # 82 more 4-character aliases このコンフィグは、要するにあなたの頭の中のスペースをキーストロークに置き換えます。短縮コマンドのエイリアスを覚えれば、タイピング数の節約が可能です。しかし私はこれが好きではありません。私はタイプミスをしますし、睡眠不足なこともたまにあるので、このエイリアスではやりづらくなってしま
アジャイルな開発には安全性が不可欠 : 現実世界の安全機構との3つのアナロジー | POSTD
(2016/7/15、著者プロフィールを修正いたしました。) 仮に、高速道路の自動車をより速く走らせることがあなたの務めだとします。もしあなたが、ドライバー全員にただ「アクセルを思いきり踏むように」と言ったら、一体どうなるでしょうか？ 結果は明らかに、大惨事となるでしょう。それなのに、ソフトウェアの構築を速めようとする時に、多くの開発者がまさにそんな態度を取っているのです。その理由として持ち出されるのは、以下のようなことです。 「本当にアジャイルに進めたいので、デザインやドキュメントには時間をかけられない」 「これは本番環境にすぐ反映しなきゃいけないから、テストを書く時間はない」 「何もかも自動化する時間はなかったので、コードのデプロイは手作業でやる」 自動車が高速道路を高速で走るには、安全性が欠かせません。より速く走るためには、ブレーキやシートベルト、エアバッグといった、いざという時にド
横柄なパスワード – パスワード認証に関する改善策 | POSTD
パスワードにはうんざり。改善しましょう。 誰もが経験するあの瞬間。新しいサービスに登録し、パスワードを選んで入力する。でも、入れません。選んだパスワードは十分安全なはずなのに、使いたいサービスが独善的にそれを拒むのです。 記号、数字、大文字、小文字を少なくとも１つずつ使用しなければなりません。 小文字の長いパスワードの方がドルマークだらけの短いパスワードより安全だということを証明する、 XKCDの有名なコミック のことは忘れましょう。まず、あなたの主力パスワードが $$ICECREAM$$ だとします。アイスクリームは、恐ろしい人生の希望の灯火とも呼べるほどの大好物なので簡単に思い出せます。そして、このパスワードにはブートのための特殊文字が入っています。 残念なことに、 $$ICECREAM$$ には小文字と数字がないので、客観的に見れば安全ではありません。そこで、このサービスのためのパス
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
Visual StudioでPythonを書くべき理由 | POSTD
最近、 Visual Studio 2015 がリリースされました。Pythonにも対応しており、 Python Tools for Visual Studio （PTVS）を使うことで、編集やインテリセンス、デバッグ、プロファイリング、Azureへのパブリッシングなど、ほとんど全ての機能が利用可能です。その詳細や ビデオチュートリアルの一部、ドキュメンテーション、その他のソース はvisualstudio.comで見ることができます。また、 Python Tools 2.1 や Python Tools 2.2 beta についてはリンク先のブログ記事をご覧ください。今回の投稿では、Pythonで仕事を始める際にVisual Studioの使用を検討すべき理由について話していきたいと思います。 非常に便利なインテリセンス 何だかインテリセンスについてはいつも話していますね。Visual
コードの品質を維持したまま開発スピードを上げる | POSTD
高品質のコードベースは、反復作業やコラボレーション、メンテナンスを簡単にすることで、長期的な開発のスピードを上げてくれます。Quoraではベースコードの品質は重要だと考えます。 高品質のコードを維持することは利点がありますが、その反面かなりのオーバーヘッドが発生し、実際の開発のサイクルに時間が掛かってしまいます。このオーバーヘッドと利点の折り合いを付けるのは難しい問題です。この場合、2つの選択肢しかないように思えます。低品質でコードスピードが速いか、もしくは高品質でスピードが遅いか。スタートアップは素早い開発サイクルに最適化しているので、多くの人は低品質で進めたほうがいいと思っています。 このジレンマは解消できます。ツールやプロセスを工夫することで、コードベースの品質を維持したままスピードを速めることができるのです。この投稿では、コードの品質に関しての私たちの考えや、2つの世界を共存させる
Pythonにおけるプロファイリング ― コードの高速化のために | POSTD
ここHumanGeo社ではPythonを使うことが多く、それは極上の楽しみでもあります。美しく機能的なコードを短時間で記述するのにPythonはうってつけで、私個人にとっても一押しの言語です。仕事に限らずプライベートでも使っています。そんな素晴らしいPythonですが、欠点がないわけではありません。それはあまりにも遅いことです。幸いPythonには、コードをプロファイリングするための優れたツールがいくつかあるので、コードの美しさと速さを共存させることができます。 HumanGeoで働き出した頃、実行に長時間を要すプログラムのボトルネックを探り、何とかしてそれを速くさせるという仕事を担当しました。その内容は、 cProfile や PyCallGraph （ ソース ）、はたまたPyPy（高速なPython用代替インタプリタ）などの各種ツールを使って、プログラムを最適化するためのベストな方法
Optimizelyを使ってクビになりかけたワケ ~統計学が苦手なマーケターへの薦め~ | POSTD
（訳者注: 検定手法について、この記事には一部内容が古い部分があります。Optimizelyは現在、両側検定を採用し、独自開発したより精度の高い統計手法(Stats Engine)でテスト結果を表示しています。Stats Engineに関する記事: 日本語 ・ 英語 ） 私たちがSumAllでA/Bテストを一斉にスタートさせて6ヶ月が経ち、あまりよくない結末を迎えました。それは勝算があるとした結果のほとんどが新規ユーザーの獲得改善にはつながらなかったことです。それどころか、私たちは失敗したのです。そして私の一番の責任はユーザー獲得の増加であるということを考えると、本当に最悪の状況でした。私にとっても、私のキャリアにとっても、そしてSumAllにとっても。 過去に A/BテストとWebサイト･パーソナライゼーションの会社 に勤めていた経験から（はっきり言うとMonetateはOptimize
JavaScriptのモナド | POSTD
恒等モナド Maybeモナド リストモナド 継続モナド Do 記法 連鎖呼び出し モナド とは、一連のステップによって実行する計算を記述する際に使用する、1つのデザインパターンです。 純粋関数型プログラミング言語 では、モナドは 副作用を管理する ために広く利用されていますが、 マルチパラダイム言語では、モナドで複雑性を制御することもできます 。 モナドはデータ型をラップして、空の値を自動的に伝播したり（ Maybe モナド）、非同期コードを簡略化したり（ 継続 モナド）といった、新たな動作を既存のデータ型に追加します。 一連のコードをモナドと見なすためには、その構造には次に挙げる3つの要素が含まれていなければなりません。 型コンストラクタ — 基本的な型に対してモナドの動作を追加した型を作成する機能です。例えば、基本的なデータ型 number に対して、 Maybe<number> とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
