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

雲の足跡

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

2017年10月05日(木曜日)  (柿添 貴士)

SEOに関する構造化データ2(JSON-LD)

実際に構造化データを使う上でJSON-LDを用いましょう。


JSON-LDの基本記述

基本の形
[script]
{
 "@context": "http://schema.org/",
 "@type": "####"
}
[/script]

-* scriptタグの中にまとめて書く
-* HTML内どこに置いてもOK


サイト名

実際にサイト名であれば以下のようになります
{
 "@context": "http://schema.org",
 "@type": "WebSite",
 "name": "AliveCast",
 "url": "https://www.alivecast.co.jp/"
}


よくわからない人向け

エンプティヘッド状態でも容易に使えます。
むしろ専門的な知識がなくても使えます。
面倒臭がりな人は情報を入れてどのような構造化データになるか、
試しにやってみましょう。
https://www.jamesdflynn.com/json-ld-schema-generator/


ガイドライン

2017年9月に構造化データを設定する際に従うべきガイドラインをGoogleが公開しています。
https://developers.google.com/search/docs/guides/sd-policies

簡単に書くと

・構造化データで様々な表示をさせることができるが、表示が記述通りされるとは限らない
・ユーザーにとって最適な検索結果を表示できるようGoogle側で調整する
・検索結果には検索履歴や場所、デバイスの種類を含むさまざまな多くの要素が影響する
・構造化データに書いたものより別の機能ものが適切だと判断することもある
・シンプルな青のタイトルリンクのみが最適だと判断することもある
・ページ情報が、それぞれのガイドラインやに従っていない場合は、構造化データは利用されない
・構造化データテストツールが認識できなかったエラーがある場合は、構造化データは利用されない
・構造化データで指定しているコンテンツがユーザーに見えない場合は、構造化データは利用されない
・構造化データが、ページ情報と関係なかったり誤解を招くようであれば、構造化データは利用されない

エンドユーザーさんのために、
正しく確かな情報をマークアップしていきましょう。

リッチスニペットにダイレクトに触れるJSON-LDの記述はまたの機会に触れたいと思います。

2017年9月25日(月曜日)  (柿添 貴士)

SEOに関する構造化データ1

SEOに間接的に関係しているであろう、
検索エンジンクローラーとの対話に必要な、
構造化データについてです。

構造化データとは

ホームページ上の記事・ページ内の文章や単語に対して、
情報や意味をメタデータとして持たせます。

それにより検索ロボット・クローラーの内容解釈を容易にし、
ユーザーにとってより有用な検索結果を、
検索エンジンは提供できるようになります。


クローラーの内容解釈

TakashiKakizoe(Engineer)

私たちヒトがこの文字列を見た際に解釈できるものとして、
アルファベット、TakashiKakizoeという人名?、肩書きはEngineer?
といったことが挙げられます。

Googleをはじめとする検索エンジンのクローラーも、
優秀なAI(人工知能)を裏で動かしていますので、
上記のようなヒト同等の解釈はできます。

しかし、実際に人名であるか肩書きであるか、
これらは確かなものではありません。

そこで、これらの情報・意味を
クローラーに伝える手段の一方法として、
構造化データが挙げ・られます。


構造化データを使うことのメリット

1.意味をクローラーに伝えられる

上述の通り文字列や画像がどのような意味を持っているのかを伝えることで、
そのページには実際にどのようなデータがあるのか、
ユーザーにとってどんな有益な情報があるのか、
これらを容易に把握することが可能となります。

ブログ記事であれば、
誰が書いたか、どのような人物なのか、
どのような事柄について書いてあるのか、

製品であればどのような製品か、
地域であればどのような地域か、

といった情報も書くことができます。

2.リッチスニペット検索結果に表示される

普段のGoogle検索などで目にする検索結果は、
・青文字のページ名とリンク
・サイト内容の短い文字列
等が表示されるかと思います。

しかし、これらだけではなく、
パンくずや画像といったデータが
表示されていることもあります。

これらの付加情報はリッチスニペットと呼ばれ、
その中でもパンくずを簡単に表示してくれることでも、
構造化データの存在は知られています。

これらもページ構造を示した構造化データにより
クローラーに伝えることが・できます。


実際に構造化データを使う

実際にこれらの構造化データを使うためには、
ページのマークアップを行う必要があります。

また、意味を紐づけるためのボキャブラリーについても
知っておく必要があります。

■ボキャブラリー
Google、Microsoft、Yahoo! などが
仕様策定に取り組むschema.orgというものがあります。

ここでの定義をもとにマークアップする方法が一般的です。
http://schema.org

■シンタックス
マークアップを行う際にシンタックスを選択できます。

・Microdata
・RDFa
・RFDa Lite
・JSON-LD

GoogleはJSON-LD形式を推奨していますので、
実際にはJSON-LDでのマークアップを行いましょう。

次回はJSON-LDでのマークアップについて触れたいと思います。

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にも続々と新しいメンツが・・・!


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