読者です 読者をやめる 読者になる 読者になる

bz0のにっき

ログ置き場

UI設計をするときにやること

自分のメモなので偏りあるし、抜け漏れも多そう。やっていく中で継ぎ足していきたい。

目的とゴールの明確化を行う

  • そのサービスを作ることでどんな問題が解決できるのか?
  • そのサービスを作る前と後でどう変わるか?(Before / After)
  • ゴールはどこか?
  • サービスがユーザに貢献できているかどうかの評価の指標を決める

画面遷移

  • 変えられない部分はあるか?
    • 前提として、どこから呼び出される等制限はあるか?
  • 処理の視点から考える
    • 入力されるデータと出力されるデータは何か?
    • どのようなステップを踏む必要があるか?
  • 簡単に画面の流れを紙に書いてみる

画面構成

  • 表示する要素は何か、リスト化してみる
  • xmindで要素を階層構造にしてみる
  • 要素の階層構造を、h1~落とし込む

UIモックを書く

配置

リード文

対象ユーザはどんな人か?

なぜ把握しておく必要があるか
どこまで説明すべきか?を明確にする為

リテラシー高い人?低い人?

[どうする?]
低い人なら、汎用的なIT用語も噛み砕いて説明する必要がある

専門分野のキーワードを利用する場合、分かるか?

[どうする?]

  • わからないなら、補足説明をつける必要がある
  • 専門分野のキーワードをなるべく使わない

ツール独自のワードはないか?

何の事前情報もなしに伝わるキーワードか?
ツールの文言をキーワード単位に切り取って確認する。

伝わらないなーっと思ったら、別のワードで伝わらないか考えてみる。

ルフレビュー

UIモックを画面ごとに印刷して、何も知らない人を装って
そのサービスを使ってみる(紙で)

文字列のHTMLからタグ名を全て抽出

jQuery 再帰関数 Javascript

文字列のHTMLからタグ名を全て抽出するJavascriptです。
再帰関数を利用しているので階層が深くなってもすべて取得することが出来ます。

再帰関数とは
再帰関数を学んでワンランク上のJavaScriptエンジニアになろう! - Qiita

・$.parseHTML 文字列をHTML要素に変換します
jQuery リファレンス:jQuery.parseXML

var taglist = {
  tags: [],
  h: function(html){
    Object.keys(html).forEach(function (key) {
      if (html[key].tagName){
        taglist.tags.push(html[key].tagName);
	if (html[key].childNodes.length>0){
            taglist.h(html[key].childNodes);
        }
      }
    });
  }
};
var str = "<div>aa<b>aaa</b>aa</div><table><thead><tr><td>aaaa<td><td>bbbb<td></tr></thead><tbody><tr><td>cccc</td><td>ddddd</td></tr></tbody></table>";
var html = $.parseHTML(str);
taglist.h(html);
console.log(taglist.tags);

「taglist.tags」に配列でタグ名が入ります。

Array[13]
0:"DIV"
1:"B"
2:"TABLE"
3:"THEAD"
4:"TR"
5:"TD"
6:"TD"
7:"TD"
8:"TD"
9:"TBODY"
10:"TR"
11:"TD"
12:"TD"

Werckerを最小限の構成で試す(PHP)

開発環境 CI Wercker PHP

Werckerを少し触ってみている。
Wercker Home

PHPUnitで、単純な単体テストをする(DB使わない)最小限の構成です。

Werckerでの構成

  • CentOS6.5

DockerのBoxを利用する
https://hub.docker.com/r/hasedon/centos6.5/

  • PHP5.3.3
  • PHPUnit3.7.38

環境が古くてすみません。

wercker.yml

box: hasedon/centos6.5
build:
  steps:
    - script:
        name: repo install
        code: |-
            wget https://dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/epel-release-6-5.noarch.rpm
            wget https://dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/ius-release-1.0-14.ius.el6.noarch.rpm
            rpm -Uvh epel-release-6-5.noarch.rpm
            rpm -Uvh ius-release-1.0-14.ius.el6.noarch.rpm
    - script:
        name: PHP Install
        code: |-
            yum -y install php php-cli php-common php-mbstring php-mysql php-devel php-xml
            php -v
    - script:
        name: composer Install
        code: |-
            curl -sS https://getcomposer.org/installer | php
    - script:
        name: phpunit Install
        code: |-
            php composer.phar update
    - script:
        name: phpunit
        code: |-
            vendor/bin/phpunit Test.php

CSVのローカルダウンロード

PHP

環境

PHP5.3

前提

・volcanus/csvライブラリを利用
 ※composerでインストールしてください。
 
volcanus/csv - Packagist
GitHub - k-holy/Volcanus_Csv

課題

SJISでダウンロードすると、JIS第3・第4水準の漢字が文字化けする(「?」になる)

対策

参考:
ExcelでBOM付きが無双するPHPでのCSVの書き出し方
[PHP] Mac版Excelと互換性のあるCSVファイルを出来るだけ効率よく作成する - Qiita


UTF-8CSV出力
・BOMをつける(このファイルを読み込みする際はBOMついてるので注意する)

・UTF-16LEにしないとMACで文字化けするようですが
 試してみたら文字化けしてしまったので、とりあえずWindowsのみ対応です。

Vagrant+PHP+NetBeans XDebugの設定

開発環境 Vagrant PHP NetBeans XDebug

PHPデバッグの効率化・ソースコードリーディング促進の為に
XDebugを入れてみました。

環境

CentOS6.5
PHP5.6
Vagrant1.8.4
xdebug 2.5.0
netbeans8.0

Vagrant

IP:192.168.33.10
SSH:127.0.0.1:2222

サーバ側の設定

xdebugのインストール

yum -y install php-devel php-pear
pecl install xdebug

php.ini設定

/etc/php.ini

zend_extension=/usr/lib64/php/modules/xdebug.so

[XDebug]
xdebug.remote_autostart=On
xdebug.remote_enable=On
xdebug.remote_host=192.168.33.1
xdebug.remote_port=9000
xdebug.remote_log=/var/log/xdebug.log
xdebug.remote_mode=req
xdebug.idekey=netbeans-xdebug
xdebug.remote_handler=dbgp

zend_extensionで指定するxdebug.soのパスは
xdebugインストール完了のログに書いてあるのでそれを指定します。

Build process completed successfully
Installing '/usr/lib64/php/modules/xdebug.so'
install ok: channel://pecl.php.net/xdebug-2.5.0

xdebug.remote_hostには、VagrantのホストのIPを設定しますが
「192.168.33.10」を「192.168.33.1」にして下さい。

apacheの再起動

service httpd restart

NetBeansの設定

ツール > オプション > PHP > デバッグ
f:id:bz0:20170201011159p:plain

プロジェクト > 実行構成
f:id:bz0:20170201011438p:plain

リモート接続
f:id:bz0:20170201011615p:plain

ファイアウォールの許可

xdebugで利用しているポートを許可します。

NetBeansデバッグ実行

デバッグ実行してみると、下記のように
設置したブレークポイントで止まってくれるようになります。

f:id:bz0:20170201012438p:plain

軽量フレームワークSlimで開発する為のメモ

PHP slim

軽量フレームワーク Slimを使う

Slimという軽量フレームワークを使って開発をするときに
どういう風に作っていくべきか作法がわからなかったので
Skelton(土台)を下敷きに進めていくことにしました。

自分で色々試行錯誤するより、道筋が見えやすそうですし。


残念ながらPHP5.3環境なのでSlim2を使うことにしました。
https://github.com/aurmil/slim2-skeleton

※すみません、PHP5.5以上でしないと使えませんでした。
 ローカルの仮想環境が複数あり、間違えて5.6で試してました。。。

※PHP5.3でも、symfony/yamlのバージョンを2.0に落として
 プログラム内の配列が「[]」で書かれてるものを「array()」に書き直せば使えました。

どういう仕組みになってるのか把握する為に
中を少し読んでみたので、メモします。

skeltonの作成

composerをインストールした後に下記でスケルトン作成する

composer create-project aurmil/slim2-skeleton [your-project-name]

仕組み

全体像

f:id:bz0:20170127005247p:plain

index.php

/public/index.php
/project/public/でブラウザ叩くと初めに呼ばれるファイル

'cli-server' === PHP_SAPI

コマンドラインから起動したかをチェックする
http://qiita.com/ukisoft/items/8885a541a99f3b0e2e2e

bootstrap.php

/app/src/bootstrap.php
処理のメインとなるファイルです。

初期設定

/app/src/config.php
下記ファイルを読み込んでいる

/app/config.yml

時刻設定と、言語設定は変更した方がよさそう

default_timezone : 'Asia/Tokyo'
language_code : 'ja'

エラーログの扱い

/app/src/dependencies.php

・monologでログを出力する
・twigでエラー表示

ルーティング設定

/app/src/routes.php
slimによるルーティング

get,postパラメータの取得方法

$get  = $app->request->get();
$post = $app->request->post();

urlFor
http://blog.code-life.net/blog/2014/01/06/redirecting-slim-application-from-subdirectory/

basic認証ログアウト用のブックマークレット

Javascript

試した環境

・htttp通信(セキュリティ的にどうなの?というのはありますが)
basic認証でログインすると、ユーザIDとパスワードのクッキーが設定される

ブックマークレット

ネットで探してみたのですが、クッキーを削除してくれるだけでAuthorizationヘッダが残ってログアウトできない
通常のセッションを消すブックマークレットばかりだったので、メモしておきます。

ブックマークレットの元となるJavascript

chromeのコンソールログでテストしながら書いていきました。

  //クッキー削除
  document.cookie = "ID=; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/;";
  document.cookie = "PW=; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/;";

  //authorizationヘッダをリセットする為にdummyを仕込む
  var url = window.location.href;
  url = url.replace("http://", "http://dummy@");
  window.location.href = url;

http://dummy@」の書き方は、下記記事を参考にさせていただきました。
PHPによる簡単なログイン認証いろいろ - Qiita


ブックマークレット

javascriptをminifyで圧縮
JSCompress: Minify Javascript Online / Online JavaScript Compression

名前空間を汚染しないように、(function(){})();で囲みます。
ブックマークレットを作るときのTips - Qiita

javascript:(function(){document.cookie="ID=; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/;",document.cookie="PW=; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/;";var url=window.location.href;url=url.replace("http://","http://dummy@"),window.location.href=url;})();

IEではセキュリティエラーが出て動きませんでした。
 basic認証をつけたlocation.hrefが原因なのではと思われます。