Lチカ開発ブログ

https://l-chika.com/の開発ブログ

Webサイト構築の構造・骨格・表層

自分なりのWebサイト構築手順のまとめ。

IAシンキング Web制作者・担当者のためのIA思考術 を参考にフローを整理し、サイトのコンセプト以降からシステム設計の手前に至るまでの手順。

Webサービス構築のきっかけについては、 こちら で。

Webサイト構築に必要なプロセス

  1. 戦略
    • サイトの目的
    • ユーザーニーズ
  2. 要求
    • 機能仕様
    • コンテンツ要求
  3. 構造
  4. 骨格
    • 情報デザイン
      • インターフェースデザイン
      • ナビゲーションデザイン
  5. 表層
    • ビジュアルデザイン

1 -> 5 は時系列な順序であり、上から下に行く事で 抽象的->具体的 となる。

ここでは、「3. 構造」以降についてをまとめてみる。

※ 戦略・ 要求については、こちら で。

サイトストラクチャ

簡単に言うとサイトマップの事。動作手順や画面遷移のフローチャート等をつくる。

そしてこの段階で以下を決める

表現方法の統一

IAシンキングでは設計での表現方法の統一としているが、自分の場合にはサイトで利用する文言統一をこの段階で決定する

ハイレベルサイトストラクチャ

IAシンキングでは「サイトを俯瞰し要点をおさえる」とし、コアコンテンツを見つけ出し、それを書き出すとある。 で、その思考フレームワークとして以下を例示。

  1. トップページとその他コンテンツ群
  2. メインメニュー類
  3. サブカテゴリー
  4. 詳細コンテンツ群

で、自分の場合をザックリと以下に。

  1. ホーム:最新記事
  2. グローバル:部品、記事
  3. 部品一覧、記事検索
  4. 部品詳細

画面設計

IAシンキングでは「画面設計」とは、「ラベル設計」「サイトストラクチャ設計」「ナビゲーション設計」の集大成とある。 そして、次の3つを抑える必要がある 1. 画面内のエリア定義(レイアウト) 2. 画面前後のフロー(ナビゲーション) 3. 画面内の機能(アクション)

自分のサイトの特性から、あらかじめあるページタイプ、レイアウトパターンをイメージして細部をつめてみる。 自分の場合には、Free Responsive Mobile Website Templates Designs - w3layouts.com から近いカテゴリーを見つけて、設計をしてみる

ワイヤーフレーム

上記から近いイメージのページをみつけたら、 Wirify ブックマークレットを利用してワイヤーフレームを表示し、それを元に自分でCacooやKyenoteを利用してワイヤーフレームを作成する。

これ以降は?

ここまでがコンセプトを決めてからの画面イメージを決めるまでのざっとした概要。

ここからシステム設計(URL、DB、etc)に行程を進めていく。

IAシンキング Web制作者・担当者のためのIA思考術

IAシンキング Web制作者・担当者のためのIA思考術

エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)

エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)

w3layouts.com

www.wirify.com

cacoo.com

「Amazon Web Services完全ソリューションガイド」を読んで

Amazon Web Services完全ソリューションガイド を読んで

概要

実践的な導入事例からAWSでの以下の実現方法を解説

  • ネットワーク
  • Webサーバー
  • ファイルストレージ
  • データベース
  • 監視

どんな人向け

AWSの入門ではなく、サービス運用の各種ケーススタディからAWSによる解決策を解説。 とはいえ、各種サービスの前提を丁寧に解説しているので初・中級者向けの内容に感じた。

AWSを利用して、シンプルな構成でアプリケーションを開発したことがあり、スケールメリット・監視を意識した構築をしたい方には良書だと思う。

他のAWS書籍と比較して

どんな所が新しいか

最新の書籍ということだけあって、自分が知る限りでは、これまで出版されている中では以下の内容が新しかった。

  • Lambda、API Getewayでのサーバーレスアプリケーション
  • Application Load Balancer(ALB)の設定
  • RDSのAurora(内容的には少しだけど)
  • CloudTrail、AWS Configでの監視

どんな書籍と読み較べたか・一緒に読むと良い本

本書を読んで内容が近く、読んでおくとより知識が深まると感じた書籍。

Amazon Web Services完全ソリューションガイド

Amazon Web Services完全ソリューションガイド

Amazon Web Services実践入門 (WEB+DB PRESS plus)

Amazon Web Services実践入門 (WEB+DB PRESS plus)

Amazon Web Services クラウドデザインパターン実装ガイド 改訂版

Amazon Web Services クラウドデザインパターン実装ガイド 改訂版

Amazon Web Services 基礎からのネットワーク&サーバー構築

Amazon Web Services 基礎からのネットワーク&サーバー構築

「成功者の告白」を読んで。ベンチャーで働くプログラマーも参考になった

成功者の告白 (講談社+α文庫) の感想

概要

 経営コンサルタントの著者が、これまでの自身の経験や出会った企業をベースに経営者が陥るパターンを物語にしたもの。

 物語は主人公がベンチャー企業を創業するところから始まり、その成長過程を描いている。

感想

 最初は V字回復の経営 2年で会社を変えられますか 企業変革ドラマ (日経ビジネス人文庫) のように経営者や起業家を対象にした本かと思った(これはこれで面白い)が、ベンチャーで働く人間であれば、誰でも共感できる内容。

出版は結構前の本だけど、内容は色褪せない普遍的なところがある。

 自分は複数のベンチャー企業で成長していく過程を経験しているが、本書にあるパターンが「あるある」として受け入れられ、 そのパターンがなぜ起こるのかというメカニズムが説明されている点に、ものすごく共感と学びを得た。

気づきをえたところ

  • 「成長カーブ」を利用した説明のわかりやすさ
  • 事業(仕事)と家庭との相関
  • 組織が拡大していくと現れるポジティブグループとネガティブグループ
  • 鬼の経営、仏の経営とマネジメント

 企業が成長していく過程にいるとどうしてる起きる諸問題に対して、経営者だけでなく、社員に対してもどう向き合っていけば良いかという示唆を得られる。

どんな人にオススメ

 IT系は特にベンチャー企業が多く、本書のような成長カーブを描いていえる企業が多く感じる。そうゆう意味では職種、メンバー・リーダーに係わらずIT系で働く全般にオススメ。

成功者の告白 (講談社+α文庫)

成功者の告白 (講談社+α文庫)

ActiveRecordでMySQLの正規表現(REGEXP)

ActiveRecordを利用して、MySQLのREGEXPを利用したい場合

class Book < ActiveRecord::Base
  scope :with_title_regexp, -> (pattern) { with_regexp(columns_hash['title'].name, pattern) }
  scope :with_regexp, -> (column, pattern) { where("`#{table_name}`.`#{column}` REGEXP ?", pattern) }
end

こうすると、以下のように正規表現を利用した検索ができるようになる

Book.with_title_regexp('^[a-d]') #=> SELECT * FROM `books` WHERE (`books`.`title` REGEXP '^[a-d]');

ActiveRecordのincludesでネストされた関連をロードする方法

ActiveRecordのincludesメソッドで関連テーブル(belongs_to, has_one, has_many)をキャッシュできる。 そこからさらに、関連テーブルの関連をキャッシュする方法

環境

前提

  • Bookがauthor,publisher,categories をもつ
  • Authorがaddress, affiliationをもつ

やりたいこと

Bookの関連をキャッシュ、かつAuthorの関連もキャッシュしたい

class Book < ApplicationRecord
  belongs_to :author
  has_one :publisher
  has_many: categories
end

class Author < ApplicationRecord
  has_one :address
  has_one :affiliation
end
Book.includes([{ author: [:address, :affiliation] }, :publisher, :categories]).where(id: ids)

ちなみに自分の開発のある機能で、このincludesを利用する前後でシステムのLatencyが半減した。 Railsで簡単にできるパフォーマンス改善。

参考

Railsで複数テーブルのjoins/includesとwhere検索 | EasyRamble

1年ぶりにbrew updateした時のメモ

どんな時のため

  • MacのOSをバージョンアップしたりすると brew update がうまくいかない
  • 環境: macOs Sierra バージョン:10.12.2

きっかけ

開発はVagrantでしたりするけど、ローカルでサクッとrubyの動作をチェックしたいときに、rubyのバージョンを変更しようと、 brew upgrade rbenv ruby-build をしようと思ったら、エラーとなった

手順概要

  1. brew updateとupgrade
  2. rbenvのupdate
  3. bundler のupdate

brew updateとupgrade

$ brew update
Error: The /usr/local directory is not writable.
Even if this directory was writable when you installed Homebrew, other
software may change permissions on this directory. Some versions of the
"InstantOn" component of Airfoil are known to do this.

You should probably change the ownership and permissions of /usr/local
back to your user account.
  sudo chown -R $(whoami):admin /usr/local
Kernel.exit

$ sudo chown -R $(whoami):admin /usr/local
  • パーミッションを変更しても、さらにソース管理でエラーとなる場合は、git statsh
  • 必要なパッケージをupgrate
  • パーミッションは元に戻しても、戻さなくても
$ brew update

Could not restore untracked files from stash
Error: Failure while executing: git stash pop

$ cd /usr/local && git stash pop --quiet
$ brew update
$ brew upgrade rbenv ruby-build
$ sudo chown root:wheel /usr/local

rbenvのupdate

  • ruby 2.3.3をインストールする場合
$ rbenv install --list
$ rbenv install 2.3.3
$ rbenv versions
$ rbenv global 2.3.3
$ rbenv rehash
$ ruby -v

bundler のupdate

  • 特定バージョン以上のrubyをサポートしているgemをインストールする際に、なぜかbundle install 時にエラーになった
  • bundlerが利用しているバージョンが違ったためのよう

rubyとbundlerのパスを確認

$ which ruby
$ which bundle

違っている場合には以下を実行

$ rbenv exec gem install bundler
$ rbenv rehash
$ which bundle

ELB->ALBに変更した際の確認メモ

ELBのtypeを ClassicApplication に変更した際のメモ。

概要

  1. 従来のELBとは別にALBを増設
  2. ALBのDNS name(A Record)からIPを取得する
  3. ローカルの/etc/hostsを変更して、ブラウザで確認する

ALBのDNS name(A Record)からIPを取得する

$ dig xxxx.ap-northeast-1.elb.amazonaws.com

/etc/hostsを変更

$ sudo vim /etc/hosts

/etc/hosts

xx.xx.xx.xx hoge.com

ブラウザで確認する

hoge.com をブラウザで確認して、ALBにトラフィックが流入していることを確認する