とにかく早くプロダクトのプロトタイプを作るための技術についてまとめます。 この技術は運用しやすく作る技術とはまた別の技術です。 （綺麗に作るのは後でやる） かなり偏った考え方もあると思いますがご容赦ください。 プロトタイプを作る上でやらないことを決めます。 実はやることよりもやらないことを決めることの方が難しいです。 UXに基づいて後回しにするという意思決定が必要です。 プロトタイプでやるべきこと コンセプトの決定/チャネルの調査： なぜ作るのか、誰をターゲットとして作るのか、競合プロダクトの調査 コア機能の実装： ユーザの苦痛を解消させるプロダクトのコア機能の実装をします。 ここで想定しているコア機能とは一画面に収まるアプリケーションのメイン機能の事を指します。 デザインはモックレベルではなく、ユーザが使う想定のデザインテーマ、レイアウト、アフォーダンス、メンタルモデル、UI、アニメーシ

ブラウザで動くWebページのプログラミング実装をフロントエンドと呼びます。 最近はJSON色つけ係と呼ばれてたりしますが、 Web開発未経験・初心者向けに最低限知っておいたほうが良い基礎知識とテクニックに関して体系的にまとめておきます。 （CodePenによる動作例付き） 環境構築に関しては（兎に角）早くプロトタイプを作る技術（初心者向け）を参考にしてください。 HTML、CSS、JavaScriptはブラウザ自体の実装に依存します。 この記事では比較的汎用的に使える書き方やHTML、CSS、JSを記載したつもりですが 最新のJavaScript APIやCSS3の機能によってはブラウザによってサポートされていない機能もあります。（特にIE） 各機能に関してはCan I useで現在のブラウザの対応状況を確認することができます。 HTML HTML(Hyper Text Markup La

RFC 6749 (The OAuth 2.0 Authorization Framework) で定義されている 4 つの認可フロー、および、リフレッシュトークンを用いてアクセストークンの再発行を受けるフローの図解及び動画です。動画は YouTube へのリンクとなっています。 English version: Diagrams And Movies Of All The OAuth 2.0 Flows 追記 (2019-07-02) 認可決定エンドポイントからクライアントに認可コードやアクセストークンを渡す方法については、別記事『OAuth 2.0 の認可レスポンスとリダイレクトに関する説明』で解説していますので、ご参照ください。 追記（2020-03-20） この記事の内容を含む、筆者本人による『OAuth & OIDC 入門編』解説動画を公開しました！ 1. 認可コードフロー RF

はじめに node + expressで以下のようなことをしてみます mongoDBに保存しているname/passでユーザ認証 認証OKならJWT形式のtokenを発行して返却 JWTトークンを使って認証要のAPIにアクセス これらをform認証でなく、CUrl等を利用してできるようにします。 このサイトにしたがって実施してみます 必要なもの node npm POSTman(api検証用のchrome extention) mongoDB サーバに実装するもの secureとsecure外のURL nameとpasswordによるユーザ認証 認証後にtokenを返却 ユーザは取得したtokenを保存、全リクエストに付与 tokenを検証、OKであればJSONで情報を返却 mongoDBのインストール(mac) # install brew install mongodb # mongo

しあわせの国って同人サークルでゲーム制作してます。 ダラダラと野郎4人でゲーム制作を開始してから1年経ちました。まったり楽しく制作しています。 そんな同人活動ですが、資金はないし、同じ物理スペースに居るわけでもないし、活動時間なんて決まってないしと、様々な事情が会社という組織と異なってきます。そんな中で、快適に活動するためにいろんなツールだとかサービスだとか試してきました。以前はコロコロ使用サービス増やしたり使用ツール変更したりしてましたが、安定してきたのでいくつか紹介します。 なお、それぞれのツールについては軽く紹介する程度とします。気になる物があったらぜひググって、利用してみてください。 メンバー全員Windowsです。Windows以外のOSじゃ動かないものも含まれてます。 ゲームそのものを作るためのもの Unity - Game Engine 最強のゲームエンジン Visual S

【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分

プログラミングでよく使う英単語のまとめ【随時更新】 随時追加、整理していきます。 名前をつけるときには、名詞、動詞の違い、複数形、過去形などに注意しましょう。 オブジェクト指向では、クラス名は名詞、メソッドは動詞とします。 使ってはいけない言葉 get / set アクセサ (getter / setter) やプロパティによく使われている。 それ以外に使うと混乱を招くのでよくない。 get は軽量な処理と考えるので、中に重い処理は書いてはいけない。 単純な取得/設定以外で使いたくなったら他の言葉を考える。 load, save, commit, store, enable, disable, fetch, register, configure, add, etc... check 意味が広すぎて何をしているかわからない。 できるだけ別の言葉を使う。 具体的に何をしているかに分解して考え

この記事について Let's encryptは無料で使用できるSSLプラットフォームです。certbotコマンドを使って、簡単にSSL証明書の取得と更新ができます。 しかし、あまりに簡単で手軽すぎるためか、ネット上ではやや問題のある手順が紹介されているケースが見られました。私なりにベストと思われる手順をまとめておきますので、改善点があれば教えてください。 DNSの設定、Webサーバのセットアップ、certbotのインストールは完了しているとします。またcertbotのコマンド名はcertbot-autoで、$PATHが通っていると想定します。 証明書の取得 以下のような補助スクリプトを準備します。

これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や

はじめに 「最近、curlが楽しい」 というわけで、最近、curlでPOSTしたりDELETEしたりcookieからSessionを読み込んだりと触れ合う機会が多かったので、その時知ったものを備忘録も兼ねてまとめました。 なるべく実行コマンドとその結果の出力をセットで書くようにしています。 curlコマンドは便利 curlは便利です。 APIと触れ合っていると、 手軽に HTTPリクエストしたくなる色んなシーンに出会います。 「あれ？　サーバー死んでる？」 「思ってたレスポンスと違うな、何が返されているんだ？」 「認証必須にしたんだけど、うっかり抜け道ないよね？」 「さくっとPOSTしてテスト用にデータ準備したいんだけど...」 ...etc こういった、とりあえず生で、くらいのテンションでHTTPリクエストしたいなら、curlは有力な選択肢の一つと思います。 もちろん、本格的な確認やデー

$ nodebrew -h Usage: nodebrew help Show this message nodebrew install <version> Download and install a <version> (compile from source) nodebrew install-binary <version> Download and install a <version> (binary file) nodebrew uninstall <version> Uninstall a version nodebrew use <version> Use <version> nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote

弊社に５年間在籍していたロシアの天才ハッカーが先日退職しました。 ハッキング世界大会優勝の経歴を持ち、テレビ出演の経験もある彼ですが、正直こんなに長く活躍してくれるとは思っていませんでした。彼のようなタレントが入社した場合、得てして日本の大企業にありがちな官僚主義に辟易してすぐに退職するか、もしくはマスコットキャラとして落ち着くかのどちらかのケースがほとんどなのですが、彼は最後まで現場の第一線で活躍してくれました。 そんな彼が最後に残していった退職メールがなかなか印象的だったので、その拙訳をここに掲載します（転載について本人同意済み。弊社特有の部分は一部省いています。） ああ、なんという長い旅だったろう。この会社で５年間もセキュリティを担当していたよ（諸々の失敗は許してくれ） 俺は他の退職者のように面白いことは書けないが、私のこの退職メールを読んでくれている人、特に新人エンジニアのために、

Cargo Tracker とは エリック・エヴァンスのドメイン駆動設計 で紹介されている様々なパターンを実際に使用して、有志が作成したサンプル Web アプリのこと。 DDD Sample Application - Introduction オリジナルは Spring Framework を使用している。 一方、この実装を Java EE 7 で置き換えたサンプルが公開されている。 Cargo Tracker この実装を読みながら、 DDD で紹介されている以下のパターンがどのように実装されているのかを確かめてみる。 レイヤ化アーキテクチャ エンティティ 値オブジェクト 集約 リポジトリ サンプルアプリを動かす ソースのダウンロード このページ の一番下に zip のリンクがあるので、そこからダウンロードする。 環境準備 以下のソフトウェアをインストールする。 JDK 7 以上 Mav

はじめに Android Studio に用意されたスターター(テンプレート)を使用して開発を始めると androidTest というディレクトリが用意されています。容易にユニットテストやらUIテストが書ける仕組みが用意されているのかな、と期待するのですが、とくにそのようなものは見当たりません…。 そこで、新たにプロジェクトを始める前提で、テストツールの準備をしてみました。ソースコードはこちらにありますので、あわせてご参照ください。 可能にしたいこと ユニットテストを実行したい クラス単体の機能を実行したい。IDEのなかで簡単に実行できて、デバッグもできるようにしたい。 モックを使いたい ユニットテストをするにあたって、他所に依存している機能（たとえば外部APIへのアクセス）をモックで代用したい。 自動のUIテストをしたい UIへのインプットをエミュレートしたうえでのテストをしたい。 導入

はじめに エンジニアやっていると色んなサービスを作りたくなると思うのですが、Herokuのフリープランが使えなくなってしまった影響で無料でのサービス運営は難しくなってきています。 もちろん、Google App Engineなど無料で運用できるものもあるのですが、サービスにロックインされてしまうのが多くちょうど良い物が見つかりませんでした。 ということである程度安く色々やろうとすると、1台のサーバでいい感じに複数サービスを立ち上げるという昔ながらの構成になるのですが、Dockerを使うことで環境セットアップなどサーバ管理の手間を最小限にしていこう、というのがこの記事の趣旨となります。 方針 要件 安い サービスにロックインされない スケーラブル（もしサービスのアクセス量が増えたとしてスケールさせられる） インフラ管理が容易 セキュリティとかなるべく気にしたくない 以上のことを踏まえた結果C

「翻訳: WebAPI 設計のベストプラクティス」を読んで色々と思うところがあったので書きました。 上記の記事は訳文でありますので、正しくは「Best Practices for Designing a Pragmatic RESTful API」に対する所感と述べた方が良いのかもしれませんが、日本語で通して読めるよう Qiita に投稿された訳文に対する所感として書いています。 以下では「翻訳: WebAPI 設計のベストプラクティス」並びに「Best Practices for Designing a Pragmatic RESTful API」は「当該記事」と表現します。 観点 当該記事では「○○とした方がよい」との意見に対してそうすべき理由が明らかになっていないか、もしくは表現が曖昧な場合が目立っていると感じました。設計は実装のようにプログラム言語仕様が制約を与えられないため、意図

業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A

JavaでWEBアプリケーションを作りたい！！という要望に今答えられるフレームワークはいくつかあるが、 その中でSpring Bootは大きな存在感があると思う。 短期間で業務系アプリを構築してほしいという要望が来たのでSpring Bootを使って開発した。 いくつか躓いた点をメモしていたので、それについて共有します。 ※注意：これは実際使ってみて困った点を共有するために記述しています。 ※Spring Bootを使ったことがないというかたは、こちらの方が参考になるかと思います。：http://qiita.com/opengl-8080/items/05d9490d6f0544e2351a システム全体像 ・フレームワーク：Spring Boot ・実行環境：開発中は組込みTomcat。本番運用はTomcat7上で。 ・ログイン認証：Spring Security ・プレゼンテーション層

背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip

人感センサ A500BP (DSUN-PIR, SB00412A-1も) が安いだけでなく Raspberry Pi との相性もバッチリだったので、人感カメラが10分で出来てしまった話。RaspberryPiraspbianraspistillPIRセンサ English version is available here. はじめに aitendo の A500BP(450円)は、安い上に、電源電圧 4.5-20V(Raspberry Pi の5V Pin から給電可能), 出力は 3.3V(Raspberry Pi の GPIO 電圧) の ON, OFF と相性もバッチリです。そこで、電子工作一切なし、ジャンパ線(5本75円) ３本で単に Raspberry Pi につなげて、GPIO をポーリングするだけの簡単な shell を書くと、手持ちのカメラモジュール付き Raspberr