「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

2018年を振り返っておく

今年やりたかったことと結果

  • JS(jQuery)になれる
  • WordPressをもう一段ステップアップする
  • 何らかのWebサービスを作る
  • デザインできるようになる

だったかな?我ながら手広すぎるなとは思うのですが、そんな目標だったように思う。

結果的には

  • JS(jQuery)になれる→ちょっとした機能はだいたい作れるようになったのでよし。
  • WordPressをもう一段ステップアップする→一般的なテーマを作れるようになってきた。クエリの使い方とかもちょっとcodex見ながら書けるし、まあOKかな。
  • 何らかのWebサービスを作る→ダメ。というか捨てる決断をした。途中までNode.jsで作ったんだけど、組織の成長と自分の成長、どっちを優先するの?っていうのを考えたときに、捨てるべきだなという結論になった。諦めきれないけど。
    あ。作業ログと見積もり作成の機能をもつWPテーマ作りました。
  • デザインできるようになる→だめ。とりあえずツールは使えるようになってきたけどデザインできるとは言えない。一個だけ提案のデザイン作らせてもらったけど、クソだった。来年はもうちょっとやりたい。

月表的な

1月

  • 前年11月に開始したN予備校の講義テキストをガシガシやってた。あと、会社のサイトリニューアルした。その時使ったmaterialize.cssを習得。
  • チームの研修計画を作った

2月

  • 会社サイトのリニューアル完了。
  • 朝活スラックチームに参加
  • 保守プラン作ろうとして頓挫した。
  • IE対象外を決める(例外で11だけ。)

3月

  • 動画メインのサイトを作った

4月

  • GoogleDanceTokyoに参加
  • 徳丸さんのWordPressセキュリティセミナーに参加
  • 保守やセキュリティについて知識蓄える

5月

  • Node.jsの復習を兼ねて、Expressを使って物品在庫リストを作り始める。
  • 会社のサイトをConcrete5にリプレースしようとするも挫折
  • Webデザインシンキングセミナーに参加

6月

  • 在庫リストシステムの制作を打ち切りされる
  • 会社でmacが支給される。誤ってUSキーを発注し、タイピング二刀流に進化。
  • デザインツールの扱いを覚えるため、勉強開始

7月

  • アナリティクスセミナーを開催
  • 社内開発環境を刷新すべく、勉強会開始
  • WordCampTokyoボランティアスタッフ申し込み
  • 個人名刺を作成

8月

9月

10月

11月

  • プログラミング(アプリ系)放棄を決意。Webサイトに注力開始。
  • サイトのデザイントレース開始
  • オウンドメディアセミナーに参加

12月

今年ツイッターでみて忘れたくないと思ったものを連ねる

 

 

www.ketancho.net

affi-note.com

 

 

 

 

 

 

speakerdeck.com

 

 

 

 

 

amix-design.com

Internet Explorer の今後について – Japan IE Support Team Blog

 

 

picsum.photos

 

 

 

stackoverflow.com

 

 

 

 

 

projects.lukehaas.me

coliss.com

jp.techcrunch.com

 

振り返り終わり!

 

 

サービス作りの記録:第0回(2018/7/15)

この文章について

初めてのサービス作りのアイデア、企画、開発の過程を記録したもの。多分続く。

狙いは以下。

  1. 宣言による強制力
  2. 自分の考えを記録して、人が見られる状態にしておくこと。
  3. 思考の整理。文章にするときに思考が整理されることが多いので
  4. サービスの質的に、ある程度参加者が必要であるため、多少はバズる必要がある。作ってみたエントリーはそれなりの拡散力がある

作るサービスの背景

自分は割と職を転々としているタイプだと思う。ざっくり以下。

バーテンダー(正確には飲食全般)はとても思い入れが強くて、Webの知識を得た個人としては、やはりこの業界に何かを残したいという思いが強く、今回作るのは飲食向けのもの。

 

あまり引っ張っても仕方がないので、解決したい課題を書いておく。要件をメモしてるGoogleDocからペタッと。

解決したい課題と背景

  • 飲食店の集客はほぼ「待ちオンリー」になっている(しかも掲載料高い)
  • お客側も、自分に合う店を探すのが大変(店側からのアクションがないから)


これを損失と考え、お店側、お客側双方がミスマッチを感じずに、かつ手軽に出会えるきっかけを作って解決したい。

現時点でのコンセプトや要件

これまた全部ペタッと。要件を考えるのはとてもデザイン的だなーというのが現時点での感想。こう、自分がこのサービスを通じてユーザーにどうなって欲しいのか?どんな幸せを形作りたいのかとても問われているなと感じる。

サービス案はちょっとした隙間時間に考えていて、大体最初は直感。

このサービスもそう。飲み会の幹事で、店探すのが面倒で、自分の希望に対してオファー来る方が楽じゃない?と思ったのがきっかけ。

そして徐々に肉付けしていった。そもそも店側が客選んだっていいじゃんとか。

コンセプト

理想のユーザー像
飲食店側
  • 個人店のオーナー、ある程度の裁量があるチェーン系店長やその部下の担当者
    • ITリテラシーは低い。忙しいためにPCからの利用は面倒だし時間を作るのも大変厳しい。片手間でちょっとした集客活動ができたら嬉しい。
一般ユーザー側
  • 慣れない幹事を任せられて、お店選びが面倒だな、と感じているユーザー
  • とはいえ根が真面目なので、色々としっかり調べてしまって、負担になってしまう人

コンセプトワード

スペックっぽく
  • 飲食店と飲食店ユーザーのライトなマッチング機会を提供して、お互いが幸せになるサービス

 

キャッチコピーっぽく
  • make new favorite, make new chance
  • find new table
  • believe own(口コミに惑わされるな)
  • 寄り道のお供に◯◯
  • smart catch(ほぼ冗談。スマートな客引き的な)
  • table filter(いらない情報は入ってこない)

主な機能

飲食店側

  • ユーザー(お客側)の要望をタイムラインとして読める
    • ただし、見られるのは提案受付状態がONのユーザーのみ。
  • 要望リストを以下の条件を組み合わせて検索ができる
    • 日付
    • 人数
    • 料理のタイプ
    • 飲み物のタイプ
    • 利用シーン
    • 雰囲気
  • 日時や人数などでソートができる

 

  • お客の要望シートに対して以下のアクションが可能
    • いいね
      • いいねは、一件押したら3分間はできない
    • DM
      • 相互いいね状態になると、お客ユーザーにDMできる

 

  • 自店舗のプロフィールページを作成できる
    • 店舗名
    • ショートPR
    • その日のいいね(誰からいいねきたかはわからない)
    • 累計いいね(同上)
    • 自店のサイトURL
    • 自由記入欄

お客側

  • 自分の今現在の要望を書いておくことができる
    • 日付
    • 人数
    • 料理のタイプ
    • 飲み物のタイプ
    • 利用シーン
    • 雰囲気
    • 自由記入欄
  • 提案受付の状態を切り替えられる(ON、OFF)
    • OFFの時には、お店側からは見られない
  • お店IDで指定してブロックできる
  • フィルター機能(設定された内容にそぐわないお店には要望ページをクローズする機能)
  • いいねをもらったお店のプロフィールが見られる
  • 相互にいいねしたお店から届くDMを読むことができる
  • お店のプロフィールページにいいねがつけられる
  • 一度押したいいねを消すことができる

持たせない機能

  • 予約機能(ノーショー防止)
  • お客からお店への評価(出会いのきっかけ作りがこのサービスが担うべきこと。)
  • お客からお店へのDM(返信もできない)
  • 既読通知機能(お互い気まずくなるのは避けるべき)
  • お店検索(解決したいことの一つは、「お店選び、選択肢多すぎて面倒問題」

 

次回はこれについて色々自分自身自問自答しながら、コンセプトや要件を詰めて行きたい。

言語もどうしようかなあ。経験があるのはNode.jsなんだけど。会社の仕事的にはlarabelも学んでおくべきだし。

ユーザー情報の登録と暗号化|Nodeで簡易な品目メモを作るシリーズ。

ユーザー登録画面を作る

メモを作る画面と表示する画面ができたので、次はログイン関連を作る。

まずはユーザー登録の画面とそのrouting。

今回はregisterで統一する。

register.jade

 
form(action="/register" method="POST")
p.row
span.input-field.col.s12
input(type="text" name="userName")
label(for="userName") ユーザー名
span.input-field.col.s12
input(type="email" name="userEmail")
 span.input-field.col.s12
 input(type="password" name="password") 
 label(for="password") パスワード
 label(for="submit)
 if(typeof message !== undefined)
 p #{message}
 

jadeの記法はまた後日まとめるかもしれない。

register.jsでユーザー登録と暗号化

 
var express = require('express');
 var router = express.Router();
 var connect = require('./connect');
 var moment = require('moment-timezone');
 moment.tz.setDefault("Asia/Tokyo");
 var crypto = require('crypto');(暗号化に使うモジュール)


 /* GET home page. */
 router.get('/', function(req, res, next) {
 res.render('register', {
 title: 'ユーザー登録'
 });
 });

 router.post('/', function(req,res,next){
 
 
var userName = req.body.userName;
var userEmail= req.body.userEmail;
var password = req.body.password;
var cipher = crypto.createCipher('aes192', password); (passwordをaes192で暗号化)
var encrypted = cipher.update('userName', 'utf8', 'hex');(第一引数:salt的な何か?)
encrypted += cipher.final('hex');(ここもまだ理解不足)
var password = encrypted;

var query = 'INSERT INTO users(user_name,user_email,password)
VALUES("'+ userName +'",'+' "' + userEmail + '",'+'"'+password+'")';

connect.query(query,function(err,rows){(DBに書き込む)
res.redirect('/');
});
 
});
 

createChiprerはどうももう推奨されていないようで、近いうちにリプレイスしたいところではあるけど、ひとまずこれでパスワードの暗号化ができた。

Expressは簡単にいろんな処理ができていいな。

WP_Queryで複数の固定ページを読み込む方法

ググっても出てこなかったので書いておく。

今回のケースは、カテゴリページの中に、指定した固定ページを読み込ませたい、という状況。

この場合のクエリの書き方は、

$args = array( 'post_type' => 'page','post__in' => array(1,2) );
$the_query = new WP_Query( $args );

post__inがあったからpage__inがあるのかなーとか考えたけど全然見つからなかったよね。

DBを読み込んで表示させる。Nodeで簡易な品目メモを作るシリーズ。

前回でDB書き込みまで行ったので、今度はDBの内容を表示したい。

 

pochiweb.hatenablog.com

 

とりあえずURLはルート(localhost:9000/)でやるので、

  • routes/index.js
  • views/index.jade

の二カ所に変更を加える。

routes/index.jsの編集

今回はトップページにアクセスすると、DBから読み込んだ内容を表示するので、index.jsにgetがあったら〜〜する、という処理を加える必要がある。

これをしたいときはとりあえずrouter.get。

router.get('/←対応させたいアクセス先', function(req, res, next) {
 
 
 ◆ここにしたい処理書く
 req:リクエストから色々渡されてくる
 res:返したいレスポンス書くときに使う
 next:まだわからない
 
});

 なので最終的にこんな感じ。

router.get('/', function(req, res, next) {
var query = 'SELECT * FROM itemList';
connect.query(query,function(err,rows){
console.log(rows);
res.render('index', {
title: 'アイテムリスト',
itemList:rows
});
})
 
});

postのときはgetをpostに変えるだけで、だいたい一緒。

思考としては、やっぱり出力したいものから逆算して考えるのかな。

  1. DBの中身表示したい!
  2. viewsに渡さなきゃ
  3. DBの中身出さなきゃ
  4. クエリ書かなきゃ
  5. DB接続しなきゃ
  6. DBの接続情報入れなきゃ

views/index.jadeの編集 

 DBから取得した内容がrender関数でitemListオブジェクトとして渡されてくるので、views/index.jadeで使いたい。

当然いくつあるかわからないので、繰り返し処理をする。今回はeachで。

jadeでeachを使う

特に難しいことはなくて、以下のような使い方。

ul
each item in itemList
li #{item.itemName}: #{item.quantity}

未確認だけど、DBのカラムの名称で入ってくるっぽい。

とりあえずざっくりこんな感じ。

 

 

Node.JSとMySQLでDB書き込み。Nodeで簡易な品目メモを作るシリーズ。

Node.jsとexpressの基礎を学んだので、練習を兼ねて品目管理システムみたいなものを作ることにする。あくまで自分が使うメモなので、参考にならない人が多いかも。

このメモのざっくりとした流れ。

  1. expressのプロジェクトを用意する
  2. データベースを使えるようにする
  3. 品目名と数量を書き込めるようにする

環境

ホストマシン:mac os sierra

仮想マシンvagrant ubuntu

expressのプロジェクト準備

node.jsとexpress-generatorはインストールされてるとして、何はともあれまずはこれ。

コマンド

expressジェネレータで基本となるファイル群を作る。

express someProjectName なので、今回はexpress itemManager。

cd でプロジェクトフォルダに移って、npm install。

テンプレートエンジンはデフォルトでjade。

以上。

データベースを使えるようにする

MySQLのインストール

今回利用するのはMySQL

  1. apt-get update
  2. sudo apt-get install と sudo apt install mysql-server mysql-client

以上でインストール完了。

Sequel Proのインストール

DB作成のコマンドが面倒なためSequelProなるGUIツールで手軽に。

SSHで接続できなくて結構ハマったのだけど、以下の参考ページでなんとかクリア。感謝します。あと、なぜかSSHユーザーがubuntuになってたりしたので、もしハマったらssh-config確認。

mmiyauchi.com

データベース作成と接続 

NodeでMySQLを使うパッケージをインストール

npm install mysql

公式に習って接続してみる、ただし、なぜかcreateConnectionのところはcreatePoolにしてやっと動いた。理由はよくわかってない。

www.npmjs.com

teratail.com

var mysql = require('mysql');

var pool = mysql.createPool({
host: '127.0.0.1',
user: 'root',
password: 'root',
database: 'itemList'
});


module.exports = pool;

 

データベースに書き込む機能の作成

 接続ができたので、データベースへの書き込むプログラムを作る。

使用するフレームワークであるExpressの個人的な流れは以下。

新たな処理を作る時の個人的な流れ

  1. 変数にする場所を考えてviews/の中にjadeで見た目書く。
  2. どのURLに対してその内容を返すのか考えてroutes/にjsで処理を書く
  3. app.jsにモジュール読み込んでapp.useでURLと紐付けする

今回はトップページから品目と数量を書き込めるように、フォームを作ってDBへ書き込むので、既にあるindex.jadeにformを追加して、routes/index.jsにpostで来た時の処理を追加。query関数を使って書き込める。

 

router.post('/', function(req,res,next) {
var title = req.body.title;
var createdAt = moment().format('YYYY-MM-DD HH:mm:ss');
var query = 'INSERT INTO boards (title, created_at) VALUES
(
"' + title + '",
' + '
"' + createdAt + '"
)';
connection.query(query, function(err, rows) {
console.log(err);
res.redirect('/');
console.log(title);
console.log(createdAt);
});
});

 

f:id:pochiweb:20180517082426p:plain

 今回はここまで。

 

デザインとSEOはどう寄り添うか?

GoogleDanceTokyo(2018)に参加して、レポートを書こうかなーと思ったんですが、既に強力なまとめ記事もあったので。ちょっと思ったことを書いてみる。

チーム制作の仕事がより円滑に進むようになればいいなと。

SEOか?デザインか?

さて。クライアント、または社内でライティングしたものに対して、デザイナーさんやコーダーさんからこんな声、よく挙がりませんか?

「このテキスト、もう少し短くできないですか?他の部分と長さが違いすぎてバランス取れないんですけど」

「この見出し、レスポンシブでスマホ位になったら一文字だけ改行されちゃうんでなんとかしてもらえませんか?」

「テキスト多すぎで読む気になれない」

僕はデザイン以外は何でもやるので、自分が書いた文章をコーディングすることもあります。

なので。上で挙げたような要望はすごくよく分かるんですけども、やはりSEOにとっては「言葉」「単語」はとても大事なので、削れねーよ!と言いたい気持ちはやっぱりあります。単語以外でなんとかできることもあるので、そのときはいいんですけどね。

デザイン=課題解決

デザインのヒアリングシートには必ず、参考サイトや競合サイトの欄とか、御社独自の強みはなんですか?っていう欄がありますよね?

それがなんのためのものかといえば、顧客の業界を知り、差別化できる要素はなにか?を発見するためにあり、さらに、なんで差別化しなきゃならないかといえばそれは、より効果的な訴求をするためですね。デザインを手段、武器として。

例えば情報構造をどうする?先頭に持ってくるべき内容はなんだ?とか。

競合に負けない、ユーザーにとって伝わりやすいサイトを作るためにデザインする。

SEOも課題解決

SEOを考えながら、コンテンツを考えていく上で必ず見るのはやっぱり市場や状況です。

クライアントはどんなキーワードで上位表示したいのか?そしてライバルはどうなのか?予算はどうか?あたりを見ながら、最適なキーワードを選定して少しづつ攻略していく。クライアントの課題解決のために。

その手段、武器が「言葉」「キーワード」。

 

こう考えると、キーワードを変える、というのはデザイナーさんにとっての配色、レイアウトなど、クライアントのために頭を捻って生み出したものを尊重してもらえないという事と似ています。

 SEOの現状はやっぱりテキスト主体

これはもしかしたら既に古い認識になっているのかもしれないですが、SEOにはやっぱりある程度テキスト量が必要、というのが現状です。(これ、実際どうなのか聞いておけば良かった)

読む人の気持ちに寄り添い、キーワードを上位表示を狙うワードを組み入れて記事を書いて、見出しを付けてタイトルを付ける。

ページやカテゴリのタイトルもSEOには重要な要素で、ここにもどうしても使いたいワードというのは出てくるんですよね。

Webが「より便利な文書ライブラリをつくろうぜ」から始まっていて、そんな出自も影響してHTML=文書構造はツリー型を基本としています。

となると、ある文書の下に存在する文書は親となるページに含まれたものであるのが普通・・。さらにタイトルや見出しはSEOのランキングシグナルとしては強力な意味があるので、結構言い回しで文字数を少なくするというのが難しくなって行くことがあります。具体的には、できればカテゴリ名もページタイトルには入れたいです。やらないことのほうが多いですけど。

いいバランスのとり方って?

言い訳みたいなことをつらつらと書いてしまいましたが、デザイナーさんが必死に考えてくれたデザインを尊重したい気持ちも同じくらい強く持ってます。

だから、なんかいいバランスのとり方を考えて行きたい。

読ませるページ、魅せるページをしっかり分けた作りにするとか、デザインに入る前にどんなワードを使っていきたいと思っているのか?を共有する時間を作るとか。

まだあまり思いつかないけれど。