ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsというライブラリについて、掘り下げた紹介をさせていただきます。 lodash.jsとは https://lodash.com/ A modern JavaScript utility library delivering modularity, performance & extras. つまるところ、 ユーティリティー（なんか便利）関数を集めたやつ めっちゃかるい という特徴を持つライブラリです。近頃のフロントエンドの流行りであるThree.jsだったり、Vue.jsだったりといったものに比べると 地味 です。非常に地味ですが、個人的

新しい＆流行っているサービスということで、Web業界の著名人の方々も数多く質問を受け付けて、それに答えまくっていました。 その中で、本に関する質問に答えているものがあったので、それを自分用にまとめてみました。 たくさんあったのですが、ビジネス関連本に絞ってみました。（ちょっと定義あいまいですが汗） 実は3名の発言をまとめたのですが、それだけで32冊もの大ボリュームになってしまいました… しかしどれも読みたい本ばかり！みなさんの参考になれば幸いです！ 積読増やしたらごめんなさい。 深津貴之さん（@fladdict） Web業界、特にUI・UX業界で知らない方はいないほどの有名人ですね。 Twitterアカウントはこちら。 THE GUILD代表でありながら、ピースオブケイク CXO（noteのUXの役員）も務められてます。 「誰のためのデザイン」「理解の秘密」「マテリアルデザインガイドライン

タスクを５つに分類すればもっとうまく時間を管理できるようになる 2017年12月2日投稿 2019年7月9日更新 カテゴリ：タスク・スケジュール管理 著者: jMatsuzaki 私の愛しいアップルパイへ 私に備わる超人的な能力。それは愛する人の頭の中を見抜くことができることです。 冗談だとお思いですか？それでは今あなたの頭の中をのぞいてみせましょう。 hmm,,,なるほどあなたは１つ悩みを抱えておられる。それは「創造的でバランスの良い時間の使い方をするためにタスクをどう整理すればいいか」でしょう。 期限に遅れないように仕事を進めたい一方で、学習と成長を促してくれる長期的なタスクも進めたい。具体的な行動は分からないが解決すべき問題はある。そのうえ刻一刻と状況は変化していて、とてもうまくバランスをとるためのタスクリストなんて作れそうもない。そうお思いでしょう？ 腰を抜かしましたか？言ったでし

前回は「メディアビジネスは今すぐやめましょう」というテーマでした。記事はフェイスブックで1,300いいね！をいただき好評でしたが、やはり抽象的な内容だったせいか「そもそも行動モデルはどのようにデザインすればいいのか？」とご質問を多数いただきました。なかなか1つの記事では説明しきれないものですね。 また「行動モデル」のわかりやすさを優先するため、グルメ系サービスの「ホットペッパーグルメ」を例にしましたが、「結局リクルートがもっていくのかよ」との悲観的な意見もいただきました。お気持ちはよくわかります。 しかし、そんなことは決してありません。私はリクルートに対抗するための方法論として「行動モデル」を提示したつもりです。そこで今回は「ホットペッパーに勝つ方法はあるか？」というテーマで、「行動モデル」の基礎的なデザイン手法を解説したいと思います。 受動的アプリは「大逆転」できる？ まず、前回のおさら

Connehito inc. ママリのデザイナー きよえ氏です。サービスデザイン全般を担っています。 先日、ママリの登録導線をリニューアルしました。その振り返りをしている際におもしろい改善を見つけたので、noteにまとめてみようと思います。 入力フォームのUI改善以下はママリの初回登録時に通る「ニックネーム登録画面」です。左がこれまでのUI、右がこれからのUIです。 ボタンや文言など全面的に改善を行ったのですが、その中で特に工夫したのは「入力フォームの表現」です。 入力フォームの右側に"さん"を配置することで、ママさん同士でコミュニケーションしやすいユーザー名を登録してもらえるように体験設計をしました。 ママリはママさん同士が会話をしながら課題解決を行う場所なので、コミュニケーションのしやすさは非常に重要です。現状のママリは、匿名でありながら、その先にいるママを感じられる、いわば"2.5次

この記事は１ヶ月後の自分のネタ切れにつきアドベントカレンダーの記事ということになりました Why SPA や モバイルアプリ だととりあえず Firebase Functions に graphql エンドポイントを一個マウントして金で殴ってスケールさせるところからスタートするのがいいと思います。金の弾丸というやつです。 この環境は、query と mutation は実装できるけど、 Cloud Functions のライフサイクルの都合上、 wsバックエンドのsubscription は実装できません。そこは Firestore とか使ってなんとかできるんでいいかって感じ。 自分の用途としては、Firestore の write系は一律禁止、 read 系は firebase.rules で制御しつつ subscribe して、リアルタイムではない複雑な問い合わせやロジック検証付きの副

去年の今頃にNode.jsとGoでサーバサイドレンダリングをしました。 ２０１７年になって自分の中でこうやってサーバサイドレンダリングすればいいなという一つの答えが出たことを書きます。 サーバサイドレンダリングの必要性 サーバサイドレンダリングをやる理由に２つ理由があると思います。 １つはSEO、もう１つが表示の高速化です。 もしGoogleからのアクセスのみを考えているのであればあまりサーバサイドレンダリングするメリットは薄いかもしれません。 GoogleのクローラはJavaScriptも解釈してくれると言われています。 それとsitemapを設定してもindexをしてくれるので個人的にSEOのためにサーバサイドレンダリングすることはとくにないです。 次に表示の高速化のためですがこれはファーストペイントの高速化のためにサーバサイドレンダリングするべきかですが これはその通りでサイトアクセ

やったこと safariからiPhoneのカメラを起動する canvasで写真撮る box保存とサーバ送信する angularでやってるけど、ほとんど標準のJS使った処理なのでtypescriptをヴァニラJSに置き換えれば何でもいける気がします。 ただし、reactだと魂を震えさせるアイツが一転して抵抗勢力となりもろもろツライ感じになるのでご注意ください。 https://github.com/facebook/react/pull/9146#issuecomment-319629271 環境 カメラついてるマシン 筆者はMBP（mac book pro）のフロントカメラでざっと作りながら、iPhone7で実機確認する手順でやっています。 mediaStream API対応 ブラウザ 中核です。カメラやスクリーンシェアリング、マイクのようなビデオやオーディオ入力装置を扱うAPIです。 s

はじめに 今年は、Google Home や Amazon Echo が発売されるなどスマートスピーカーが揃ってきた年になりましたね！ 自分もGoogle Home Miniを発売日に買って、心の中で「未来を買ってしまった…！」なんて思ったりしてました。 実際のところ、目覚ましにしか使っていませんが…ｗ （目覚まし止めるのも大変です。中央のボタンが無効化されているので「Ok,Google とめて！」って3回ぐらい言わないと止まってくれません） 手軽に開発を始める これはググるとたくさん出てくることなのですが、便利なライブラリが公開されているみたいです。 よく使われているのは下記のNode.jsのライブラリですね。 google-home-notifier 簡単に使い方を説明します。 google-home-notifierのインストール $ # package.jsonを作ります $ np

フューチャーアーキテクト Advent Calendar 2017の2日目です。 はじめに システム設計が大好きで大嫌いな皆さん、こんにちは。 突然ですが、皆さんはどのようにシステム設計における ドキュメント腐る問題 に立ち向かっていますか？ ドキュメント腐る問題とは、設計時に作成した各種ドキュメントがGoogle Driveやファイルサーバ上で陳腐化してしまい、現状の正しい状態を指していないことです。せっかく新規参画者がキャッチアップしようとしてもドキュメントが真実を示していないという怖いやつですよね。 解決策としては、各種ドキュメントを、MarkdownやAsciiDoc、UMLはPlantUMLやmermaid、ERDはPlantUMLやerd、画面遷移図はUI Flow、REST-API設計はSwaggerなど、なるべくテキストベースで管理し、GitHubなどのリポジトリで管理する

ついに完成！！というわけで色々ありましたが、数十時間の作業を経てLINEスタンプが完成しました！ご協力頂いた皆さん本当にありがとうございました。 エンジニアの皆さんがたくさん褒められる優しい世界ができれば嬉しいです。 頑張って作ったので是非使ってください！笑「買ったよ〜」とか「使ったよ〜」などの報告をハッシュタグ #エンジニアを褒めるネコ でツイートして頂けると嬉しいです！ こちらからダウンロードできます！ 追記：画像の無料配布始めました！slackなどで使いたいという声が多かったので画像を配布いたします！ 画像はこちらからダウンロードできます！ !!! Special Thanks !!! polcaでご支援頂いた皆さんは私のアカウントにDMください！スタンプをプレゼントします！ @iseshiman , @takayaohta , @polche , @Sohki , @shoyama

まえがき Vue.js によるデスクトップアプリ開発を行う際に便利な electron-vue というボイラープレートの紹介です。 この記事は、昨年度の Vue.js Advent Calendar 2016 に投稿された ElectronでVue.jsを始める の2017年度版という位置付けを意識して書いていきます。 (ElectronとVue.jsはどちらも開発スピードが早いことで有名なので、変更点が幾らかあります) 初期設定 electron-vue 日本語ドキュメント を参考に構築していきます。 ※事前に node.js のインストールが必要です。 まず vue-cli をインストールし、 vue init でプロジェクトを作成します。 my-project の部分は好きな名前で大丈夫です。 ? Application Name (my-project) ? Project des