• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

雲の足跡

WEBを張り巡らせるクモであったり
空をただようくもであったりしたい
WEBエンジニアの日々の足跡
雲の足跡

2017年8月04日(金曜日)  (柿添 貴士)

表示優先順位を決めるアルゴリズム

Google検索でいえばどのようなサイトが優先的に表示させるか
Facebookで言えばどのような広告や投稿を優先的に表示させるか

このような優先度を決めるアルゴリズムは日々変化していっています

Facebookは8月2日にニュースフィードの優先度決定アルゴリズムの変更を発表しています

投稿に付随するリンクから飛ぶページの表示が遅い場合、
投稿のランクを下げていくとのことです。
そしてこの変更を数か月かけて適用させていくとのこと。

ユーザーが実際にページリンクをクリックした場合に表示が遅くイライラするとの意見から
この対応に踏み切ったとのことです。

Googleの検索も同様にユーザーがどのような価値を感じるか、
思うか、体験するかが非常に大切になってきます。

ユーザーに価値のないページは表示ランクを落とされてしまうのが実情です。

ユーザーが望んでいるものは何か?
わかりやすく情報を提供できているか?
読み込みスピードは遅くないか?

あげるとキリがないですが、
常にエンドユーザーの目線が大切ですね。

2017年5月29日(月曜日)  (柿添 貴士)

phpmdを使ってみる



 
 
phpmdとは
phpmdはPHP Mess Ditector、コードでバグを生みそうな箇所、設計、実装上の問題をルールに従って検出してくれるツールです
http://phpmd.org/about.html

早速インストール
pearコマンドを使います、&yum
# yum install php-pear
# pear channel-discover pear.pdepend.org
# pear install pdepend/PHP_Depend
# pear channel-discover pear.phpmd.org
# pear install --alldeps phpmd/PHP_PMD
# pear install PHP_CodeSniffer

composer利用
URL:(https://getcomposer.org)

JSON_FILE:composer.json
{
"require-dev": {
"phpmd/phpmd" : "*"
}
}
# php composer.phar install
# sudo ln -s /vagrant/vendor/phpmd/phpmd/src/bin/phpmd /usr/bin/phpmd
# sudo chmod ugo+x /usr/bin/phpmd

実際に使ってみる
phpmd hoge.class.php text cleancode,codesize,controversial,design,naming,unusedcode

cleancode:コードが綺麗であるかどうか
codesize:コードの複雑さを検出
controversial:命名規則、キャメルケースなどを検出
design:設計上の問題を検出
naming:メソッド名、プロパティ名の名称をチェックする
unusedcode:使われていないプロパティや変数などの検出

コードのxx行目が複雑すぎるぞ
コードのyy行目の命名規則がおかしいぞ
コードのzz行目のプロパティはどこでも使われてないぞ
であったり、メソッド多すぎるぞ、行数長すぎだぞ

などなど実装上の問題をゴロゴロとリストアップしてくれます
テストのサーバや自身のプライベートサーバ上に載せて見てたりします
classが大規模になってメンテナンス性が落ちてるんじゃないかとか
設計上これで大丈夫か、簡単に見てみたいなって時には使えるんじゃないかと思います

2017年4月07日(金曜日)  (柿添 貴士)

terminalでよく使うコマンドと由来

黒い画面に緑の文字
macで頻繁にお世話になるterminalですが
画面が画面だけに抵抗感があるかもしれません
便利です使いましょう
コマンドは使っていれば覚えられますが由来がわかれば
由来がトリガーとなって頭から抜けた時も簡単に思い出すでしょう
コマンドが覚えられないから使わないなんてもったいないですよ



cd 指定先のディレクトリに移動
"Change Directory"から来ているのだそうだ

cd / でルートへ
cd ~/
cd /var/www/html/

なんかもよく使うはずです ねっ

find ファイルを探してくれる
"Find" そのままなので忘れようがない・・・!
find パス -name "ファイル名"
find . -name "*.html" | xargs grep "文字列"
で文字列が含むファイルを返します
引数 -lもつけちゃっても良いです

pwd 現在のパスを表示してくれる
"Print Working Directory"から来ているそうだ
今いるディレクトリを出力しろ!とのこと

ls 現在パスでファイルやディレクトリの表示
"List" からとのこと
ls -la なんかで見やすくなりますね

cat ファイルをターミナル上に表示
ファイルをターミナル上に表示する時にだいたい使いますが
複数のファイルを連結して出力したりする時にも使います
"Catenate Concatenate" からとのこと

mkdir ディレクトリを作る
"Make Directory"から

clear ターミナルで出力を綺麗に吹き飛ばす
"Clear"から
cd ls -la clear cd ls -la と連続で・・・

rm 削除する
"Remove" から来てます
rm -rf ./* なんかで
常日頃から吹き飛ばしていると大事なところで消しとばします
くれぐれも注意してください

cp コピーする
"Copy" から来てます そりゃそうだ
cp -r コピーするファイル名 新しいファイル名でコピーできます

mv ファイルを移動する
"Move" から来てます
mv 移動したいファイル名 移動後のディレクトリ で移動させましょう

システムいじってる人間は常日頃から触っているので抵抗感はないとは思いますが
sassやgitなどでデザイナーさんが触る機会が来た時コマンドを忘れないようここに残しときます

vim chmod chown ssh などはまたの機会にしましょう

2017年2月15日(水曜日)  (柿添 貴士)

PHP DB周りが遅いとき

DBサーバを増強、チューニングする前に、
PHP側・クエリなどを見直すと速度改善が可能かもしれません。
チューニング以外で軽く思いつくものを書いてみたいと思います。

・INDEXを貼るカラムは適切かどうか
そもそもの問題になってきますが、
検索に頻繁に利用するカラムについてはインデックスを適切に張る必要があります。
間違ってもすべてのカラムに張るなんてことはやめておきましょう、激重になります。

・SQL検索条件にインデックスを使用しているか
検索条件にインデックスを利用せずTABLE全件検索を行っていませんか。
速度改善のために適切なインデックスを張ったカラムを利用しましょう。

・無駄なカラムの読み込みを行っていないか
SELECT * として、カラムの内容を全て読み込んでいないか。
SELECT `XX1`,`XX2`,`XX3`と、指定してあげた方がもちろん速いです。
不必要なカラムは余計な処理を招くだけですので、必要なものだけ呼んできましょう。

・SQL文にクォートをつけ忘れていないか
クォートをつけずとも利用は可能ですが、しっかりつけましょう。
面倒だとは思いますが、パフォーマンスに多大な影響を与えます。
SQL文のフィールド名、検索語など解釈に時間がかかるため、
クォートにより判定のスピードをあげましょう。
数十万件のデータ読み出しで5000倍ほどの開きも出てきます。

・必要な行数のみフェッチしているか
HTML上で利用するデータのリストなどはLIMITをかけて件数制限をしましょう。
LIMITをかけずに数十万件のデータを読み込むのは非常に効率が悪いです。
使うものだけ呼んでくるのがスマートです。

・DBアクセス回数を最小にしているか
何度も、何度も同じテーブルにアクセスして違うデータを取ってくるのは非効率的です。
1回で複数の値を取る方法がある場合はそちらを選択しましょう。

・WHERE句 条件判定を極力少なくしているか
設計の問題もありますが、同じ条件で分岐する場合は複数書く必要もありません、
必要なものだけ書き、判定を極力少なくしましょう。

・WHERE句 で指定するカラムは行数が少ない方から指定しているか
WHERE句 判定の順にも気をつけましょう、先判定で行数が少ない方を優先で書きましょう。

・できる限りSQL側で処理を行っているか
PHP側のロジックでSQLができることをでカバーすると、ほぼ遅くなります。
設計にもよりますが、どちらに処理をさせるかは見極めをしっかりしましょう。
DBサーバの処理を肩代わりできるのは、四則演算と最後のソートだけだそうです。

2016年12月22日(木曜日)  (柿添 貴士)

無駄な処理を削る




今週末はクリスマス、一年が過ぎるのもあっという間です。

気温の変動が激しく寒いのか暖かいのかわかりませんので、

風邪にご注意ください。



システムグループの一員として

仕事で、プライベートで、たくさんの言語・フレームワークに触れてます

一番触っているのはPHPだと思いますが、

実際にすべての処理を一から追ってみてどこが無駄な処理かというのを追うのは苦労します



そこで、プロファイラの出番です

---

プロファイラとは性能解析ツールであり、

プログラム実行時の各種情報を収集する。

特に、関数呼び出しの頻度やそれにかかる時間を計測する。

---


どこで何がどのくらい呼ばれて、どのくらい時間かかっているのか?

ということが分かるわけですね。


PHPでいうと、 xhprofという便利なプロファイラがあります。

これにxhguiとgraphvizを用いてわかりやすく処理の流れを追うことができます。



無駄処理、重複処理は極力削っていきましょう。

私はプライベートサーバに突っ込んでいろいろ処理を追ってみたいと思います。

2016年11月07日(月曜日)  (柿添 貴士)

ブラウザ毎のブックマークを統合しスマートに






WindowsPCやMacPCなど様々なPCで様々なブラウザを利用している際に
大事そうなものはとりあえずブックマークをしてしまう私のようなユーザーは
バラバラにブックマークが散らばり、見返すのが大変なことになってしまいます。

WindowsではIE,Edge,firefox,firefoxDE,chrome,chromium,chrome canary
Macでは、safari,firefox,firefoxDE,chrome,chromium,chrome canary,Vivaldi
何てバラバラで量の多いことでしょう・・・。

そこで、ブックマークをブラウザをまたぎ、PCをまたぎ統合させ、スマートに管理しましょう。

Xmarks を使う
chromeでは拡張機能、firefoxではアドオン、safariではアプリ
何かを用いて同期が可能です。

まずは、firefoxでhttp://xmarks.comへアクセスし、アドオンを導入。
IDを作成し、情報をアップロード。

後はマージしながら同期を各PC・ブラウザで行えばOKです。

全マージが終わりましたら、次はブックマークを整理。
その後、情報をアップロード。

最後に全ブラウザで同期をかけてしまえばすっきり!


バラバラになりがちなブックマークですが同期ですっきりさせてしまいましょう。

2016年8月03日(水曜日)  (柿添 貴士)

ATOMエディタとプラグイン

WEBを仕事としているプログラマー、デザイナー、コーダーなど、
必ず利用しているかと思います、テキストエディタ。
メモ帳で全てやります!なんてことはおそらく無いでしょう。

私も、秀丸エディタやvimやATOMなどを利用してます。

ATOMとは
GitHub社が開発したオープンソースのテキストエディタで、
拡張がものすごく容易で、簡単に自分好みなテキストエディタにすることができます。
基本の機能も充実しており、非常に使い勝手が良いです。

ATOMの基本機能
基本の機能だけでも十分使いやすく、最初からインストールされているプラグインなどもあります。

・ツリー
一つのディレクトリ・フォルダを開くと、下位層までツリー状に表示してくれます。
アプリのプロジェクトを開いた場合や、階層構造を持つページの塊などを開いた場合も、
非常に扱いやすいです。

・検索
ツリーの一覧で開いているディレクトリ・フォルダからファイルの検索や、全体での検索も可能です。
もちろんgrepも容易で、置換も可能です。

・折りたたみ
エディタ左側の矢印をクリックすることでひとかたまりのブロックを折りたたむことができます。
もう一度矢印をクリックして展開やコマンドからの折りたたみ・展開も可能です。

・画面分割
一つのファイルを複数に分割して編集作業を進めることができます。
メインモニタに3分割、サブモニタに2分割、手前のラップトップに2分割、
サーバーサイド、アプリサイドを同時に開発を進めている場合時などは、
私の目の前に7つ分割された画面が表示されていたりします。

・キーバインド
ショートカットキーを自在に設定が可能です。

ATOMを使うには
公式ホームページよりダウンロードすることができます。
利用されていない方は是非、この機会に使ってみましょう。
https://atom.io

新規プラグインのインストール

簡単作業ですぐに機能拡張が可能です。
redmineのプラグイン追加とは大違いです。

1. File > Settings を選択
2. Installを選び、検索ボックスにて検索
3. インストールしたいパッケージのPackagesボタンを押す

私の利用しているパッケージ
入れすぎると起動が遅くなるとの噂を聞き、いくつか整理しました。
全部は載せられませんので一部入れているものを挙げてみます。

・atom-beauty
 ソースコードを自動で綺麗に整形してくれます。
 細かな設定も可能で、インデントをtabで埋めるのかspaceで埋めるのか、
 自由にコントロールすることが可能です。

・autoclose-html
 開始タグを入れると閉じタグも勝手に入れます。

・color-picker
 カラーピッカーを表示させます、何気に便利です。

・file-icons
 ファイルのアイコンが綺麗に表示されます。
 ツリー上でファイルがとても見やすく、気持ちが良いです。

・highlight-column
 現在選択中の列が容易に視認できます。

・highlight-selected
 選択した文字列が他にもあればハイライトします。
 とても便利です。

・pigments
 色コードを判別して、背景をその色へ変化させます。
 こちらも目視確認が容易でとても便利です。

・project-manager
 複数のプロジェクトを登録し、容易に切り替えて作業を進めることができます。
 とても便利です。

・regex-railroad-diagram
 正規表現を画像で確認できます。
 
・trailing-spaces
 余分なスペース・空白を分かりやすく表示してくれます。
 無駄なものはその場で消しましょう。

まとめ
簡単に使い始められて、自分にあったカスタマイズが可能です。
是非、便利なこのエディタを使い倒してください。

2016年4月15日(金曜日)  (柿添 貴士)

新入り

こんばんは柿添です。

三月は花粉症らしき症状にやられ病院へ行きました。
薬は効きますね、何事もなく仕事に集中できました。
感謝ですね。

四月も日々が過ぎもう花見の季節ではなくなりましたね。
皆さまは花見に行かれましたでしょうか。
今年も会社で花見をしに行きました!
全員でBBQは最高ですね!

四月といえ新たな人・モノ
我がAliveCastにも続々と新しいメンツが・・・!


会社に来られる際は是非、
新人メンツの彼らに構って行ってあげてください!

2016年2月08日(月曜日)  (柿添 貴士)

知れ渡っているもの

こんばんは。
AliveCastの柿添です。

普段PCを使っていてよく使うショートカットに
Ctrl + C Ctrl + V があるかと思います。

所謂コピペと言われているこのコマンドですが、
スマホでやろうと思うと多少時間がかかります。

タップ長押し -> 範囲選択 -> コピー

面倒ですが、たまに使わないといけないシーンがありますね。


もう一つ普段PCを使っていてよく使うショートカットに
Ctrl + Z があるかと思います。

取り消しですね。
直前の動作を取り消すことができます。

ミスタイプやミス削除を取り消しバックする場合に使うと思いますが、
スマホではどうしていますか?

iPhoneにも取り消し機能がありますが、
外で使っている方は見かけたことがありません。

知れ渡っていないというだけで、
実装されている機能が使われていないというのは非常に興味深いです。

このように一般的に知れ渡らず、ひっそりと実装されている機能が、
いろんな場所にまだまだあるかと思います。

機会があれば探してみてはいかがでしょうか?


※iPhoneユーザーの方は文字を入力した後にスマホを振ってみてください。

2015年12月18日(金曜日)  (柿添 貴士)

FireFoxのプラグイン

Webブラウザそのまま使っていますか?

Web業界人を苦しめるIEことInternetExplorerをはじめ、
GoogleChrome、Firefox、Safariなど、沢山のWebブラウザがあります。

大体の方は上記ブラウザを利用されているのではないでしょうか?
私は主にFireFoxを利用しております。

その利用しているブラウザですが、インストールした後にそのまま使っていませんか?

ブラウジングをより快適に、スピーディに!
それぞれのブラウザに便利な拡張機能を追加するプラグインを利用しない手はありませんよ!



プラグインって何者?
Webブラウザに新たな機能を追加したり、見かけを変更することが可能です。
無料で簡単に追加することができます。




おすすめしたいFireFoxプラグイン
入れすぎも良くないので、中でもお勧めしたいプラグインを。

FireBug
Webアプリのデバッグツールです。
JavaScriptのデバッグやHTML・CSSプロファイリングが可能です!
通常のブラウジングには必要ありませんが、Web業界の人間には必須ツールです。

FireGestures
ブラウジングを超高速に!
Webブラウザを覗いている時間が長時間に及ぶあなた!必ず入れましょう。
右クリックしたままジェスチャーを入力すると、それに合わせてブラウザが動作します。

例:
戻る:右クリックしたままマウスを左へ
進む:右クリックしたままマウスを右へ
左のタブへ移動:右クリックしたまま↑←
右のタブへ移動:右クリックしたまま↑→

通常ボタンをクリック、またはキーボードを押すといった動作が必要なく、
ジェスチャー一発でほぼすべての動作をカバーできます。
選択した文字列を検索エンジンで検索、消したタブを復帰、まとめてタブを消すなんて動作も一発です。

ブラウジングを超高速に、仕事も超高速に。
是非導入してみてください。


RoomyBookmarksToolbar
ブックマークツールバーを酷使している人におすすめします。
大量にブックマークしていると、[ファビコン][サイトタイトル]たくさん並べることができません!

そこでプラグイン導入すれば、ファビコンが並ぶようになり沢山のサイトを並べることができます。
ファビコンにカーソルを合わせることで、サイトタイトルも確認できるので心配ありません。

ブックマークツールバーを酷使している人は必ず導入してください。


Tree Style Tab
非常に多くのタブを開いてブラウジングされる方におすすめのプラグインです。
タブのサブツリーを折りたたむことができます!

折りたたんだタブを閉じた場合には折りたたまれたサブツリー内のタブすべてを一斉に閉じることが可能です。
ウィンドウの右側に表示することもできますし、リンクやURL文字列をタブの間にドロップすることで、新しいタブをその位置で開くことができます!

入れすぎは禁物
プラグインを入れすぎると、起動が遅くなったり、動作が遅くなったりすることがあるそうです。
くれぐれも入れすぎることの無いよう、
自分に合ったブラウザ拡張機能を導入し、快適なブラウジングを!