はじめに 認証をつけた状態でReactのクライアントから GraphQL API を使うときに簡単に実現する方法を書いてみました。認証ページでサインアップ、ログイン、トークンを使ってGraphQL APIにリクエストまで完了します。 React の開発環境の構築
Some time ago, I had the opportunity to conduct a simple workshop on the subject "Web Development vs Web Design" to my colleagues. These are my thoughts on this subject, and on my experience leading the session. For more than half a decade I've been through tons of processes of getting from the designing of the client's ideas and dreams to the implementation of their sites, modern web applicatio
今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる
これをつくります。 構成図はこんな感じ。 やりたいこと - DynamoDB を使って一覧表示 DynamoDB を使うときは、データの一覧を取得する というシーンに遭遇した場合、 read capacity unit に注意して実装する必要があります。DynamoDB は パーティションキーとソートキーによりデータをひとつだけ特定して取得することが得意ですが、複数のデータを取得する場合はクエリやスキャンを使うことになり、とり方よっては大量の read capacity unitを消費してしまうことになります。 そこで登場するのが、DynamoDB に対してスキャン・クエリをかける際に指定できる Limit です。うまく取得件数を制限できれば、消費する read capacity unitもおさえられそうです。ただし、 Limit を使うことにより一度ですべてのデータを取得できない状況が発
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
『「デザイン経営」宣言を宣言で終わらせないための3つの提言』でも触れられている通り、日本でもデザインと経営の融合が叫ばれ始めた。 これは、世界的なビジネストレンドみるとその重要性は明白で、企業の時価総額を見ても、ApppleやAmazon, Googleなど、デザインの力を活用してイノベーションを生み出してる企業が活躍している。 それに伴い、私達デザイナーの仕事の内容と、ビジネスや社会に対するその影響力もどんどん広がっているとも感じる。 自ずと、”デザイン” という言葉自体の概念も時代と共に変化し始めている。Webデザインや、UIデザインなど、これまでのいわゆる”絵を描く”ことから、デザイン的考え方を事業の為の一つの戦略スタイルとして活用する方向にシフトし始めている。 特にアメリカでは大きな企業からもデザインの重要性へが認識され、業績に直接影響を与えるレベルになってきている。 ビジネス的考
public な GitHub リポジトリなら無料で使用できる Go 言語の CI サービス 『GolangCI』 の紹介です。 GolangCI とは GolangCI | Automated code review for Go GolangCI は GitHub の Pull Request の問題を検知してコメントしてくれる Go 言語用の CI サービスです。 OSS で公開されており、public なリポジトリならなんと無料で使用することができます。 対応している Linter GolangCI の Web ページに記載してあるものを書きます。 実際はもっと種類があるので、詳細は GitHub のドキュメント を見ましょう。 gofmt goimports go vet golint errcheck チェックされていない error の検出 staticcheck 静的解析チ
こんにちは、Mackerelチームでデザイナーをしているid:takuwologです。 Mackerelでは展示会の出展や、Meetup・Drinkupといったユーザーイベントを定期的に開催しています。その際にフライヤーやノベルティをお客様にお渡しするため、いろいろなアイテムを作成してきました。そこで今回は最近作ったものをご紹介します。 フライヤー このフライヤーは展示会でスタッフがMackerelについて端的に説明することを目的に作りました。イラストを使ってサービスの機能や特徴を説明できるようになっており、裏面はお客様に持って帰って頂いた際の読み物という構成です。またイラストはノベルティに展開することを念頭において作りました。 扇子 今夏の展示会でブースに脚を運んで頂いたお客様にお渡しするノベルティとして作成しました。 グラフィックは扇子としての実用性を考えて普段遣いできるようなシンプル
CDNのエッジでJavaScriptとServiceWorkerを実行できる「Cloudflare Workers」がWebAssemblyに対応 CDNプロバイダのCloudflareは、3月にリリースした「Cloudflare Workers」を強化し、WebAssemblyの実行に対応したことを発表しました。 Cloudflare Workersは、同社が提供するグローバルなコンテンツデリバリーネットワーク(CDN)のエッジにおいて、開発者がJavaScriptのコードを配置し実行できる機能を提供します。また、HTML5の新機能として策定されたService Workerも利用可能です。 参考:JavaScriptのコードとService Workerをユーザーに近いCDNのエッジで実行可能。Cloudflareが「Cloudflare Workers」を提供開始 Service W
Yahoo! Japanが近日中にFIDO認証に対応すると表明、パスワードを使わず生体認証などでWebブラウザからのログインを可能に 最近のスマートフォンやPCには、指紋認証や顔認証などの生体認証を用いてロック画面を解除し、OSへログインする機能が備わっています。 OSへのログインはこのように生体認証などを用いて手軽にできるようになったものの、WebブラウザでソーシャルメディアやECサイトへログインするためには、いまのところユーザー名とパスワードをキーボードから入力する必要があります。 しかしもうすぐ、Webサイトへも生体認証などを用いて簡単かつ安全にログインできる時代がやってきます。 Yahoo! Japanは9月27日、「FIDO認証」(ファイド認証)への対応を近日中に行うと発表しました。 同社は2018年8月に世界で初めて開催された「FIDO2」認定テストにおいて、「FIDO2」の認
We just announced ten major new products and initiatives over Crypto Week and Birthday Week, but our work is never finished. We're continuously upgrading our existing products with new functionality. Today, we're extending Cloudflare Workers with support for WebAssembly. All Workers customers can now augment their applications with WASM at no additional cost. What is WebAssembly? WebAssembly -- of
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 尽く書を信ずれば即ち書無きに如かず 《孟子『尽心下』より》 イントロダクション 「最も理想的なオブジェクト指向を実現しているプログラミング言語は何か?」と問われたとき、君は何と答えるだろうか? C++、Java、C#。君がそうだと思っているのは表面だけで、たぶん何もわかっていないのだろう。無知であることを知っているのであれば、無知のまま過ごした方が幸せなときもある。 Simula、Smalltalk、Ruby。君は本質をいくらか知っているようだから、引き返すなら今のうちだろう。深淵を覗けば、君もまた怪物にならざるを得ない。 JavaSc
[和訳] 次期 Vue (v3.0) の計画 / Plans for the Next Iteration of Vue.js ありがとう Evan You, ありがとう Vue.js 開発チーム 元記事 Plans for the Next Iteration of Vue.js – The Vue Point – Medium 追記 (2018/10/02) この訳が Vue.js 日本語公式サイトの翻訳記事になりました 🎉 https://jp.vuejs.org/2018/10/01/plans-for-the-next-iteration-of-vue-js/ Plans for the Next Iteration of Vue.js ─ Vue.js における次のイテレーションの計画 先週の Vue.js London で、私は Vue の次のメジャーバージョンについて簡単
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン 追従ヘッダー実装時に使える動作・デザインパターン例 | NxWorld 追従ヘッダーも一般的になってきましたが、こうやって見るといろいろなパターンがありますね。 Adobe macOS Mojave(10.14)対応状況 | Adobe Community 現在、Creative Cloudの最新版とMojave 10.14の互換性があることを確認しております。 と書いてありますが、実際はPhotoshop CCの動作に問題が生じているようです。 また、外観をダークモードにするとLightroomがクラッシュするそうです。 macOS 10.14 MojaveへアップグレードしたMacで外観
この半年間はソフトウェアエンジニアとしてのアウトプットに積極的になるよう意識的に行動してみたので振り返ってみます。長くなってしまったので3行でまとめるとこんな感じです。 成長と刺激を求めて OSS contribution や登壇やイベント運営を頑張ってみた 成長したかはわからないが、知り合いが増えたりして刺激を受けることが多くなった これからも続けていくが持続可能なペースにしたい この半年間、登壇とかイベント運営とかに積極的になるよう"試験運用-セルフコントロール-"してきたのでそろそろ振り返ってまとめたい— 広島の粗大ゴミ (@ohbarye) 2018年9月27日 だいたい2018年上半期の話ですが一部期間外の話もあります。 なぜアウトプットを増やすか 唐突ですが、現職では日常の業務を漫然と続けるだけで成長するフェーズは終わったのかなぁと思っています。新しく何ができるか、何をすべきか
たった数ページのWebコンテンツに手を入れるだけで、サイト全体のビジネス成果に大きな影響を及ぼすことがある これは、ある見込み客の考え方と明白に食い違った、僕の提案内容だ。 僕は先方に上記のように言い、その主張を裏付ける具体的な数字を提示した。しかしそれでも相手はまだ納得しなかった。僕の自尊心が傷つき始めた。そもそも、画家が数学者に三角法の使い方を教えるだろうか? 芸術と異なり、コンテンツマーケティングやSEOは主観的なものではない。作成したコンテンツの質は定量化でき、ビジネスに利益をもたらすことができる。 コンテンツのほとんどは何の役にも立っていない今回のテーマについて話すには、何としても「コンテンツのほとんどは何の役にも立っていない」という事実に対処する必要がある。 作成したほとんどのコンテンツは、グーグル検索結果の7ページ目という奥深くに埋もれており、自分のブランドとはまったく関係の
当社の規定により満60歳で定年退職をした。長いようで短かった会社員生活も一区切りだ。自分のプログラマとしての会社員生活を振り返ってみる。無駄に長いし結論はないのでお忙しい人は飛ばして欲しい。 9月末なのでブログ界隈では退職エントリーがそこかしこに書かれると思うが、その中で自分の退職エントリーを連ねることにどれほどの意味があろうか。もちろんないのだが、それでも多くの書き手の年齢を考えると満60歳定年退職というところに若干の希少価値を見出せなくもない。 1984年に大学院修了して以来、プログラマとしてのキャリアを重ねてきた。大学時代の同期でプログラマとして就職したものは皆無だ。当時、工学部の同期はメーカーに就職するのがほとんどで、大手家電メーカー、自動車メーカー、電力会社などなど、当時の誰でも名前を知っている人気企業に就職するものが大半だった。 その中で、日本ディジタルイクイップメント(DEC
これらはmap系はthis.$storeなんたらの糖衣構文です。つまり、アクションが実行されるVueコンポーネントにstoreがインストールされている必要があります。 例えばよくあるmodalとかdialogとかの実装を見ると、new Vue()して、それでモーダルコンポーネント内に自分たちが書いたHTML等を飛ばしてマウントするという手法を取る実装があります。これはVueの仮想DOMのTreeを破壊しないVueフレンドリーな実装です。 しかし、new Vueをするという事は、そこでstoreを与える必要がありますが、大抵のライブラリはそれには対応していないでしょう。もちろんthis.$routeなどのvue-routerへのアクセスも同じです。 一応こちらがElementUIの参考実装です。 https://github.com/ElemeFE/element/blob/dev/pack
こんにちは。メディアロジック分析部の米田 (@mathetake) です。 今日はGunosy社とKDDI社が共同で運営するニュースパスというニュースアプリケーションで使われている関連記事推薦のアルゴリズムについて書きたいと思います。 特に、約半年前に私が導入しKPIの改善に成功した新しいアルゴリズムと、そこでコアとなる近似近傍探索(Approximate Nearest Neighbor search)の技術について述べます。 関連記事推薦とは この記事で紹介する関連記事推薦とは、「特定のニュースに関連したニュースを推薦すること」です。 より具体的には、特定の記事をクリックした後に記事閲覧画面を下にスクロールすると登場する「おすすめ記事」の枠に対して、関連したニュースを検索して表示することを指します: このような枠が設置されている事は一般的なアプリケーションにおいてごく自然ですが、推薦シ
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く