初心者ブロガーのために私ができることを一生懸命していきたいと思う 皆さんどうものびのびです。 こののびのびブログも嬉しいことに月に5万人近くの人が毎月見てくれるようになりました。 ブログを始めた当初は当然こんなにたくさんの人に見てもらえると思ってなかったから毎日感謝ばかりです。 本当いつもありがとうございます。 そこで私は思ったわけ。 「まだまだ5万PVで少ないけど、5万PV獲得できるくらいのノウハウが自分にはあるんだな」って。 それで、初心者ブロガーの方たちのブログを読むと「もっとこうしたらいいのに。」「もったいないなって気付けるようになった」 でもそこでお問い合わせフォームとかツイッターで当事者に「もっとこうしたらいいよー」って送ったらすごく失礼じゃん？ 送られた人としては「何この人不愉快だわー」って思われる人もいるはず。 だからどうしよう？ ブログすぐ辞める人多すぎ問題 ブログを始め

// 日付を指定 var date_str = "2017-01-01 00:00:00"; // 1日足す 2017-01-02 00:00:00 console.log(moment(date_str).add(1, 'days').format('YYYY-MM-DD HH:mm:ss')); // 1日減らす 2016-12-31 00:00:00 console.log(moment(date_str).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')); // 1日と1時間足す 2017-01-02 01:00:00 console.log(moment(date_str).add(1, 'days').add(1, 'hours').format('YYYY-MM-DD HH:mm:ss')); // 1日と1時間減らす 20

黄金比とは 黄金比(Golden ratio)とは1:1.618の比率のことで、人間にとって最も安定し、美しく感じられる比率とされています。多数の有名なロゴにも、デザインの調和を保つために黄金比が取り入れられています。Appleの林檎のロゴや、Twitterの鳥のロゴなどは、黄金比を用いて作られていると言われています。 フィボナッチグリッドとフィボナッチサークルの作成 さて、ロゴデザインに黄金比を取り入れるために、まずは黄金比を用いられて作られる黄金螺旋（ここではフィボナッチグリッドと呼びます）を作っていきましょう。 フィボナッチグリッドは全体のレイアウト構成を決める時などにもよく用いられます。 １．まず、正四角形を描きます。 ２．正四角形の一辺を半径とした正円を描き、正四角形に沿って1/4の大きさにカットします。 ３． 2の図形をコピーし、 黄金比である1.618の値で割ります。 ４．3

なお、本稿の内容は基本的に、Windows版のVS Code（64ビット版）で動作確認し、必要に応じてmacOS版でも確認をしている。 VS CodeでPythonする理由 PythonをサポートするエディタやIDE（統合開発環境）は数多く存在する。例えば、JetBrainsのPyCharmは優れたIDEであり、恐らく、VS CodeでできることはPyCharmでもできるだろう。それでもなお、VS Codeを使う理由とは何だろう。筆者もちょっと考えてみた。 VS Codeは無償で使える、軽量なエディタである（上に挙げたPyCharmにも無償で利用できるCommunityエディションはあるし、オープンソースプロダクトとして無償で利用できるエディタも数多いが） Python拡張機能をインストールすることで、IntelliSenseを利用したコード補完が可能になる 同じくPython拡張機能によ

Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移（トランジション）です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方

これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同

技術書典5 で本記事をさらにパワーアップさせた本を書いたのでよかったらどうぞ Chromeデベロッパーツールを使いこなそう Console編 Chrome デベロッパーツールの Console には Web 画面を解析するための便利な機能が備わっています。 この便利機能を覚えておくと Web 画面からの情報抽出 や、 Chrome Extension 開発 がとても捗ります。 ※ 筆者はこの機能を利用して、 ウェブスクレイピング時のDOMセレクタを調べたり、 Q Accelerator などの Chrome 拡張機能を開発しています。 本記事では、次の３つを解説します。 1. Console の便利機能 2. 実際に Qiita の画面を解析する手順 3. リアルタイムで評価結果を返す Eager Evaluation （Google IO 2018 で発表されました） 便利機能（コマンド

そんな声を、そう珍しくない頻度で耳にします。（先月だけで2度耳にしました。） これはデザイナーにとって明らかに醜悪な話ですが、実はビジネスにとっても最悪な計画です。 言いたいことは分かります。 賢明な彼らには「デザインに凝るよりも、仮説検証が先だ」という意図があるのです。 しかしそんな彼らに伝えたいことがあります。 それは、 「ソリューションやコンセプトが正しく伝わらないと、仮説検証に致命的なノイズが生まれる」 ということです。 「最低限のデザイン」とは？ 先に言っておくと、UIデザインを1週間で形にすることは可能です。それどころか、1日2日で作ることも可能かもしれません。 また、初期フェーズ等においてはデザインが最低限のもので構わないことには大いに同意できます。 最低限というのは、ソリューション検証に耐えられるだけのデザインを指します。 検証のためにはまずきちんとソリューションとコンセプ

こんにちは！SmartHR デザイナーのNamです。 今年2月、二人目のデザイナーとして入社しました。 SmartHR デザインチーム発足 これまでデザイナー渡邉が制作物全般に携わっていましたが、プロダクトの成長に伴いクリエイティブ面もさらに強化すべく、この度デザインチームが発足しました🎉 最近こんなもの作りました さっそくですが、今回はメンバー全員がパフォーマンスを高めて働ける環境づくりのひとつとして作成したミーティングで活用するツール2種をご紹介します！ 1.「完全理解」の札 作成した背景 社内ミーティング時、メンバーそれぞれの理解度・認識のズレが生じないために、 聞く側は「発言するよりも気軽に自己主張しやすい」、話す側は「議題に対してどれくらいの割合で理解されているかが可視化できる」札のようなものがあればいいね！と言う声が挙がり、作成することになりました。 大量生産 単発イベントな