書籍 ECサイト×ブランディング を読んだ際のメモ

自社のECサイトを立ち上げ、ランディングを行っていくプロジェクトリーダーに向けた一冊。

ブランド・ブランディングとは・・・てきなとこだけメモ。
※プロジェクトリーダーの採用方法や、ツインバード・春華堂との対談なども書いてある

ECサイト×ブランディング

ブランド

ブランドというと名前やロゴなどが思われがちだが本質はそうではない。 消費者が連想するイメージがブランド。

ブランドへの信頼があれば、少し高くても買うし、同じ品質なら選ばれる。

真のロイヤリティは、ずっと使いたい、人にも勧めたいと思えること。

ブランドの価値は真のロイヤリティの積み重ね。

単なる消費者からブランドに対する深い愛着を持った顧客へ昇華させていくことがブランディング。

デジタル領域ではECサイトがブランディングの中心

アナログ領域では実店舗が中心になるが、デジタル領域ではECサイトがブランディングの中心になる そのためECサイトからブランドを作っていくというのは理にかなっている。

SNS→ECサイト
コーポレートサイト→ECサイト
広告→ECサイト

デジタルとアナログ

どっちも大事。

アナログ（実店舗）は顧客の反応がわかりやすい。 デジタルは数値で追いやすい。（SNSのいいね数etc） また、デジタルを使ったブランディングは数値で示すことができるため経営陣や上司を説得しやすい。

ブランディングは従業員のためにも必要

自分たちのブランドのあるべき姿や、顧客とどのような信頼関係を構築したいかを従業員が語れるようになると、自社の商品を愛せるようになる。そうすると顧客の気持ちが理解した接客などができる。

自分たちが働く会社を好きなら、従業員は楽しく働ける

ブランディングは万能薬

自社のブランドが確立され、ブランディングが進むと、判断がスムーズになるためすべての企業活動が効率化される。

土屋鞄の例

1998年にモール型のECサイトに出店したが、EC サイトとコーポレートサイトのデザインのトーンが統一されず、同じ会社のサイトとは思えないようになる。
ブランドの持っている世界観がズレてしまっていた。

そのため2000年に自社のECサイトを開設し世界観を統一させた。

土屋鞄は長く愛されるシンプルな商品作りを行ってきた、ECサイトが雑な仕上がりではブランドしての整合性が取れない。

おまけ

フラクタ社には昔、職場が一緒だった人がいたりする

株式会社トップゲートを退職し、hey（STORES.jp）にJOINします

本日トップゲート社の最終出社日でした。 10月から hey（STORES.jp）に JOIN します。

STORES.jp では、フロントエンド（Vue.js） を中心に Rails や AWS をやってく感じになると思います。今までやってきた技術（Angular や GAE/Go や GCP）が一新されるのでめっちゃ楽しみです。

1年4ヶ月の在籍でした

トップゲート社では、GCP, GAE/Java, GAE/Go, Angular, TypeScript, Google Apps Script, G Suite 等を使った受託のシステム開発をいくつかやっていました。

また、GitHub や Circle CI をつかったモダンな開発スタイルに矯正させてもらえました！

開発業務以外では、Google 主催のイベントで100人以上の前で登壇したり、トレーニングの講師やチューターなどもしました。営業に同行してセールスエンジニアっぽいこともやりました。短い期間ではありましたが、貴重な経験がたくさんできました。

エンジニアを10年ぐらいやってますが、まちがいなく一番成長できた1年4ヶ月でした。本当にありがとうございました。

次の行き先

冒頭でも書きましたが hey（STORES.jp）に行きます。
hey は コイニー と STORES.jp がくっついてできた会社です。

ちょうど今日 hey の記事が ITmedia にあがってましたね。
天才プログラマー・佐藤裕介は限界を感じていた――知られざる過去、そこで得たメルカリ対抗策 (1/6) - ITmedia ビジネスオンライン

なぜ hey（STORES.jp） を選んだか

強いこだわりを持ってモノづくりに向き合う人たち＝「ライジング・セラー」を支援する仕組みを作る。という hey のビジョンはとてもかっこいいと思ったし、力になりたいと思いました。

STORES.jp はユーザーとして自分でも使ってみて、もっと成長させたいと思えるサービスだったし、募集内容と自分がやっていきたい内容がマッチしていました。あと現職を上回る年収を提示されたのも重要なポイント（お金は大事

それと hey という社名も良かった。私のハンドルネームの howdy も同じ挨拶言葉なので親近感がわきました。

hey社 絶賛採用中らしい

事業拡大中で、エンジニアもっと来てくれーという感じらしい。

hey社 募集一覧 - Wantedly

毎週木曜日に恵比寿で Hello hey という気軽に参加できる会社説明会というか交流会をやっているみたいです。興味持った人は是非。

Hello hey で僕と握手！

宣伝

技術書典5で Chorme デベロッパーツール の Console を使いこなすための技術書を出します。場所は け44です。

以前 Qiitaで書いた下の記事をパワーアップさせたやつです。見かけたら買ってください。
Chrome デベロッパーツールの Console を使いこなす - Qiita

【書評】Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク Chapter09 アプリケーションの構築 をやってみた

次の本を買ったのだが、一通り読んだ後に Chapter09 アプリケーションの構築 を実際にやってみたところ、そのままだと動かなかったところが結構あったのでメモがてら書いておく。

TL;DR

すごく勉強にはなったけど、Chapter09 アプリケーションの構築 に関しては、確認しなさすぎ & 間違い多すぎ。
「執筆時から時間がたって動かなくなってしまった」。ならわかるけど、発売して2週間もたってないのにこれは酷い。

ただ、Angularの全体的な知識を得られる、という点でみるととても良い本だと思う。

前提

筆者の Angular CLI のバージョン

% ng --version

Angular CLI: 1.6.1
Node: 7.7.2
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.6.1
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

HttpClientModule を使う

HttpClient は Deprecated になってる模様。（これはエラーにはならなかったけど警告がでる。）

P300 コードL4
誤
import { HttpClient } from '@angular/http';
正
import { HttpClientModule } from '@angular/common/http';

表記ミス

P304 コードL10
誤
"/edit"
正
"/area/edit"

あと、ファイル名が間違ってたり、キャプチャがおかしかったりは大量にあったので記載しない（進める上ではそんなに重要じゃない部分なので）

Pipeのロケール指定

Angular 5だとそのままだと動かない模様。

issueが立ってた。

Angular - Internationalization (i18n)

Angular - DatePipe

起動時にLocaleを指定する必要があるみたい。

誤
ng serve
正
ng serve --locale ja

あと longDate を指定する。(yyyyMMddだと20180104となってしまった)

P320 コードL1
誤
{{weather.dt | unixTimeDate : 'yyyyMMdd'}}
正
{{weather.dt | unixTimeDate : 'longDate'}}

OpenWheatherMap の daily forecast は使えない（有料）

本には無料で使えると書いてあったが、実際には無料では使えなくてエラーになる。 最近有料になったのかなーと思ったけど Web archive を見る限り結構前から有料だったみたい。 著者は有料プランのAPI KEYを使ってたのかなーと予想。（というかこれは酷いと思う。一度でも読者になりきって確認すれば分かる内容のはず。）

zone.js:2975 GET http://api.openweathermap.org/data/2.5/forecast/daily?appid={{自分のID}}&units=metric&lang=jp&cnt=7&q=tokyo 401 (Unauthorized)

Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク

2017年の振り返り

転職

　5年間フリーランスをやっていたけど終止符を打って 株式会社TOPGATE に入った。 フリーランス時代の仕事としては某会社の G Suite 絡みの情シスみたいなことをずっとしていた。運用もしてたけど開発系がほとんどって感じ。G Suite の規模としては日本でもトップクラスだったので、G Suite や Google API が絡んだスキルは相当ついたと思う。

やめた理由

　新しい技術のスキルが身につきにくい環境だった、というのが一番大きい。特に AWS や GCP などのクラウド環境が使えずにオンプレだったので、ここにいつまでもいたら時代に取り残されるだろうなぁと思った。フリーランスはいつ切られてもおかしくないのに、クラウド周りのスキルが身につかないならこれ以上居ても・・・みたいな。

　同僚はいい人しかいなかったし、残業はまったくと言っていいほどなかったし、いつでも休めたし、お金もそれなりにもらってた。スキルアップ問題がなければとても良い職場だったし、今でも続けてたと思う。

転職先

　G Suite のスキルを活かしつつクラウド（GCP）の知識を身に着けたかった。なので G Suite と GCP を両方やっている会社から選定した。まぁいくつか思いついたけど TG社 を選んだのは今でも妥当だと思っている。

仕事関連

　一人でやる規模の新規開発案件があって、Chrome 拡張機能やら Web 画面からサーバーサイドからマネジメントから納品まですべてやった。これをやりきったことでレベルが格段に上がったと思う。

　他の案件も含めてやった技術としては、フロントがAngular CLI, Angular, Angular Material, TypeScript。サーバーが GAE/Go, Datastore/goon, gin, GCS, dep とか。Goolge API 周りだと、Sheets API, Natural Language API, Translation API, Gmail API らへん。転職理由だったクラウド（GCP）の知識を身に着けたい、というのは余裕でクリアできているので概ね満足。

App Maker

　会社に慣れてきた頃から App Maker を使い始めた。 App Maker に関しては日本で一番詳しくなったと思う。App Maker 関連は次の記事でまとめてあるのでここではあまり触れない。 App Maker 2017年の個人的な総括 - Qiita

OSS

　q-accelerator という拡張機能を作ってリリースした。この前Qiitaの画面が変わったせいで動かなくなった機能が多いのでこれから直していく。

Qiita

　去年はフロントエンド周りの記事を結構書いてたのだけれど、今年は App Maker, GASなどの G Suite 関連が多かった。去年ほどは力を入れなかった気はする。来年は App Maker と GCP 周りを中心に書いていくと思う。

英語

　4月から iKnow! を始めた。英語はいつもすぐ飽きてやめてしまっていたのだけれど iknow は続いているのですごい。通勤電車でスマホでやる感じ。これは来年も続けていく。 いま合計が2100単語ぐらい。来年は4000単語まで増やしたい。

セキュリティホールの発見

　年の瀬に、某 Web サイトのやばいセキュリティホールを発見して報告した（すぐ対応された）。名前や住所より重要な個人情報が誰でも見れる状態かつ会員数も数十万人は余裕で超えているサイトだったので、漏れてたら騒ぎになったと思う。（というか漏れてないかはまだわからんのだけど・・・）

買い物

　今年は電子書籍閲覧用に iPad Pro、開発用に Macbook Pro 15、あとキーボードを HHKB を使い始めた。スマホは Xperia x Compact のシムフリー版に変えた。やっぱりこのサイズが一番いいね。

API error 4 (datastore_v3: NEED_INDEX): no matching index found error

GAEでindex.yamlがある状態でdeployした際に表題のエラーが発生

WEB-INF直下にindex.yamlをおいて以下のコマンドを実行してからデプロイすればdatastoreにINDEXが作られた

gcloud datastore create-indexes WEB-INF/index.yaml

参考

https://cloud.google.com/appengine/docs/standard/go/getting-started/deploying-to-app-engine?hl=ja

https://cloud.google.com/datastore/docs/tools/indexconfig?hl=ja

API error 1 (datastore_v3: BAD_REQUEST): Property Body is too long. Maximum length is 1500

DatastoreのEntityの最大文字列長は1500文字

stringで渡さずに普通に[]byteを使えばよさそう。

https://groups.google.com/forum/#!topic/golang-nuts/Zlz04UfME-A

Failed to mount component: template or render function not defined. (found in root instance)

Vue.jsを使っていてエラーが出たのでメモ

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

このページに書いてあるようにwebpackの設定でresolveを追加 vuejs.org

上記エラーを解決したら以下のエラーが発生

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

Chrome Extension開発なのでCSP対応が必要になる

npm i vue@csp

で入れ直して解決