一番フロントのダウンロード画面はインストーラがダウンロードされるので気づきにくいですがzipファイルが公式で用意されているのでポータブル化して利用することが可能です。

また、Toolboxやインストーラを介してインストールを行うことで使用することが出来ますが、インストール権限がおいそれともらえないような環境ではzipファイルなどから使用出来る環境を作ったりする場合にお役立て下さい。

PhpStormとは

JetBrains社からは様々なIDEや開発環境をサポートするようなソフトが開発されていますが、その中でもPHPでプログラミングをする方に大人気の統合開発環境(IDE)です。

環境構築方法

まずZipファイルをダウンロードする必要がありますが、公式HPをパッと見た限りじゃ分かりません。

どうやら直接のリンクはないようなのでまずはPrevious versionsをクリックしましょう。

以前のバージョンのダウンロードリンクですがここからダウンロードしましょう。

最新版が欲しい場合にはインストール後にアップデートするか、リンクアドレスのバージョンを弄って最新版のzipをダウンロードしましょう。

最新板のzipへのリンクは見当たりませんが、ファイルそのものはあるようです。

ダウンロードファイルを解凍して起動するだけで動作はしますが、コンフィグなどがWindowsのユーザーフォルダ配下に作成されてしまい、不十分なのでidea.propertiesを編集して完全ポータブル化しましょう。

設定ファイルの編集

binフォルダ配下にある、idea.propertiesを変更してコンフィグやプラグインファイルの保存先を指定しましょう。

デフォルトではidea.config.pathとidea.system.pathがWindowsのユーザーフォルダ配下になっているので変更しましょう。

変更前設定値

idea.propertiesの8行目、13行目、18行目、23行目付近の以下の設定値があります。

# idea.config.path=${user.home}/.PhpStorm/config
# idea.system.path=${user.home}/.PhpStorm/system
# idea.plugins.path=${idea.config.path}/plugins
# idea.log.path=${idea.system.path}/log

コメントを外してuser.homeをidea.home.pathに変更しましょう。

変更後設定値

8行目と13行目を書き換えれば、18行目と23行目は変更せずにコメントを外すだけでも問題ありません。

idea.config.path=${idea.home.path}/.PhpStorm/config
idea.system.path=${idea.home.path}/.PhpStorm/system
idea.plugins.path=${idea.home.path}/plugins
idea.log.path=${idea.home.path}/log

以上の設定後、「bin\phpstorm.exe」を一度起動すれば無事にポータブル化完了です。環境に依存しないのでDropBoxやGoogleDriveを使って各PCで共有化することも可能です。

日本語化などのVMOptionをしたい場合は、binフォルダ内の「phpstorm.exe.vmoptions」に設定値を書き加えましょう。

お疲れ様でした。

なかなかデザインが秀逸で誰でも簡単に使いやすいページを構築できるので、非常に人気のあるテンプレートですが使って居て悪い点も目立ったので記していきたいと思います。

http://wp-fun.com/

STINGERとは

無料のWordPressのテーマの中でも人気上位のテーマ。

何気なくアフィリエイトを巡ってみるとSTINGERを使って居ることがとても多い。
公式では下記のように謳っています

1. 色々な箇所のカラーや表示を細かくカスタマイズ
2. もちろんスマートフォンにも自動最適化。Youtube動画も自動でレスポンシブ
3. 出来る限りプラグインは不要に。デフォルトで様々な必要機能を標準装備
4. アドセンス等のアフィリエイトを簡単に収益が出易い場所に表示
5. SEOに強い、アクセスが増える独自の技を織り込み済み

無料WordPressテーマSTINGERより

パッと使った感想では非常に使いやすいテンプレートです。色々なカラーをCSS弄ることなく変えることが可能ですし、他のテーマがプラグインで実装するような機能を元から搭載しています。

サンプルページ

公式サンプルページ

企業なんかでみるような形のサイトですね。テンプレートを少し弄るとこのようにそれっぽいホームページを簡単に作る事ができます。

STINGER Plusのいいところ

• 推奨プラグインを公式ホームページで謳っていたり、セットアップ方法も公式でしっかりとサポートされているので初心者でも安心
• 設定画面の説明が単純で明確なのでぱっと見で分かりやすい
• ホームページのカラーの設定画面があり、最初からある程度ベーステーマが用意されている
• レスポンシブ対応なので意識せずともスマホに対応

アクセス解析やトップページにお知らせを掲載する機能（ウィジェット）もあるし、トップページのヘッダー画像をカルーセルにする(自動的に切り替わる奴）機能も管理画面から簡単に出来るので非常にそれっぽいホームページを簡単に作れるところが素晴らしいですね。

STINGER Plusの悪いところ

一見良いテーマだなーと思って基本設定をして調整していたんですが、結構使いづらい部分や不味い部分がいくつか出てきます。

1. HTMLの構文がおかしい点が多々ある。(後述する)
2. ウィジェットの配置箇所が限定されていてアドセンス広告を載せようとすると非常に使い勝手が悪い
3. 画像のキャプションやパンクズリストの文字色がなぜか薄い灰色なので非常に見づらい

ハッキリ言ってHTMLについて分かっていない人が書いたテーマだなと感じました。

「SEOに強い、アクセスが増える独自の技を織り込み済み」と謳っていますが、HTML構造化が明らかにおかしい点はSEOで全く影響がないとは言えません。

何と言っても機械的にチェック出来るレベルで間違っているので検索結果にいつ影響が出てもおかしくない。

実はHTMLの構造化はSEOに影響はさほど無いと言われていますが、私は僅かでも必ず影響が出ると考えています。それはアクセシビリティ上で非常に不味い点があるからです。

アクセシビリティ上で何が悪いのか？

アクセシビリティとは一言で言えば「近づきやすさ」。それは対象を選びません。視覚障害者であったり色弱であったり、健常者が白黒のディスプレイで見る場合だって対象です。じゃあHTMLの構造が悪いと何が問題なのでしょうか。構造化においては重要な、見出しタグについて確認していきます。

見出しタグの重要性

実は音声読み上げソフトなどのアクセシビリティ上では見出しタグが非常に重要な役割を果たします。

スマートフォンが普及してからWEBへのアクセス方法は様々になりました。iPhoneのボイスオーバー機能のおかげで視覚障害者でも容易にWEBにアクセス出来るようになったこともありますし、音声読み上げでWEBを見る方もいます。オーディオブックで慣れた方には出勤中にスマートフォンを開く余裕がないので読み上げで「聞いて読む」方も居るんだそうです。

さて、「読み上げソフトを使って聞いて読む」そんなときにこそ見出しタグは重要になってきます。それは一部の読み上げソフトにはショートカットキーを押すことで「h1～h6」の見出しを読み上げる機能があるからです。これは実際に視覚障害者の方から聞いた話なのですが、音声のみの情報から操作をする場合には「欲しい情報がどこにあるのか」をまず見出しタグで判断することがかなり多いようです。

しかし適切に見出しが配置されていないサイトというのは情報がどこにあるのかアタリをつけるのが難しく、閲覧を断念してしまうこともあるそうです。つまり、ページを離脱してしまうということです。

もう分かりましたね。そう、SEOには直接関係ないかもしれませんが、ページ離脱によって評価が下がってしまうので検索エンジンに引っかかりづらくなってしまうのです。もし、ここで読み上げによる閲覧者をとどめておければ効果は高いです。

やはり視覚情報が無いので、常人よりも閲覧時間が比較的長いので良いページ評価に繋がるでしょう。

じゃあSTINGER Plusでは何が悪いんでしょうか？

HTMLの構造がおかしい点

まず前項で挙げたように見出しタグの問題がある。見出しタグとはh1～h6に当たる部分で、適切にタグ付けすることでアウトライン(階層構造)を形成させることが出来る。HTML5ではHTMLのタグ付けによる構造化を推奨しており、見出しタグによってアウトラインを形成出来る。

見出しタグはh1から順番に設定しなければアウトライン化することが出来ず文書としては破綻したものが出来上がる。

※HTMLとは根本的に文書であり、タグとは文書を装飾するものではなく意味を示すもの。ブラウザや我々が視覚的に理解出来るように装飾しているに過ぎない。

じゃあSTINGER Plusはどうなのか、と思って確認してみるといきなり赤いです

トップページでいきなりh2(中見出し)がないと怒られています。しかもこれNEW ENTRYと書いてある部分がサイドバーの開始部分でh4に指定されているのですが、階層構造的には「10番のh3」の階下にあります。実際には何も関係の無いコンテンツにも関わらず。

まとめると、下記の二つの問題があります。

• h2(中見出し)がないのにh3(小見出し)が現れている
• サイドバーをh4としてしまったことで、投稿記事最後のh3の中身の一部であると示してしまっている

アウトラインはHTML文書をチェックすると機械的に確認出来てしまうのでGoogleのSEO上決して良い評価はされないでしょう。

これがカスタマイズせずに使ってはいけないという理由です。

その他

後日加筆します。

 HTMLは文書である

HTMLとは自由なものです。しかしWEBで公開するものなので人に見て貰うことが前提の物でもあります。

例えばWordの文書、見出しも無くただ段落のみで文章が構成されていたら読む側はどうでしょうか？やっぱり見出しがあって見出しに沿った文章がある、そんな構造化された文書の方が理解しやすいですよね。見出しが適切に設定されていれば読み手は欲しい情報がどこにあるかすぐ目星がつくのです。

WEBは誰でも見ることが出来て、誰でも欲しい情報にすぐにアクセス出来るのが理想です。だからこそ検索エンジンやクローラーなどの機械が構造を理解して正しいページへ導けるようにと構造化タグが追加されたHTML5 が勧告されたのです。

多くの人の目にとまって貰おうと思ったら、機械が理解が出来るように構造化しましょう。

多くの人に分かりやすい良いページだなと思えるように分かりやすい視覚表現をしましょう。

将来を考えて音声でも分かるようにしっかりと見出しをつけましょう。

人を見て貰うことを前提とした文書や論文を書くのと同じようにHTMLを作ればそれは達成出来るはずです。文書のようにHTMLを構造化出来て居ないと思わぬところで損をしてしまいますよ。

だからSTINGER Plusはカスタマイズせずに使ってはいけません！

前回の記事は下記を参照。

jQueryのDataTablesでリッチなテーブルを使おう

今回はDataTablesのエクステンションであるColVis（column visibility）を使ってボタンによる列表示の制御を加える方法を紹介します。

ColVis（column visibility）を使った列表示の制御ボタンを加える方法

サンプルページを用意しました。これを元に解説します。

列制御を加えたサンプルページ

導入手順

まずはColVisを用意しよう。エクステンションとして本家サイトに用意されている。

公式URL：http://datatables.net/index

ダウンロードURL：https://datatables.net/download/index

生成されたコードを元にHTMLに記述すれば準備は出来る。

導入方法が分からない人はjQueryのDataTablesでリッチなテーブルを使おうを参照。

ColVisを有効にする

赤字部分がColVisを適用する設定。ここではカラム切替という名前で生成する。

 <script type="text/javascript">
 $(document).ready(function() {
  $('#datatable1').DataTable({
   paging:true
   ,order:[3, 'desc']
   ,scrollX: true
   ,searching:true
   ,bSort:true
   ,bStateSave:true
   ,bInfo:true
   ,bAutoWidth:false
   ,dom: 'B<"clear">lfrtip'
   ,buttons: [
    {
     extend: 'colvis',
     text: 'カラム切替'
    }
   ]
   // 件数切替の値を10～50の10刻みにする
   ,lengthMenu: [ 10, 20, 30, 50, 100]
   // 件数のデフォルトの値を50にする
   ,displayLength: 20
   ,oLanguage: {
    sLengthMenu: "表示行数 _MENU_ 件"
    ,oPaginate: {
     sNext: "次のページ",
     sPrevious: "前のページ"
    }
    ,sInfo: "全_TOTAL_件中 _START_件から_END_件を表示"
    ,sSearch: "検索："
   }
  });
 } );
 </script>

DataTablesのオプション

ざっくりと一般的なものを紹介する。詳しくは公式ページをご覧下さい。

オプション	デフォルト値	説明
bAutoWidth	TRUE	列の幅の自動調整をするかどうか
bFilter	TRUE	フィルタリング機能の有無
bInfo	TRUE	レコード情報表示の有効/無効。現在のページやレコード総数を表示。
bLengthChange	TRUE	表示件数を指定するドロップダウンメニュー表示の有無
bPaginate	TRUE	ページングの有効/無効。
bProcessing	FALSE	処理中表示の有無。
bSort	TRUE	カラムのソートの有効/無効
bStateSave	FALSE	cookieでテーブル表示の状態維持
order	[[0, 'asc']]	初期状態のソート順を指定
lengthMenu	[ 10, 25, 50, 100 ]	表示件数のドロップダウンメニューに表示するメニューを指定
displayLength	10	ページングをしている際のデフォルトの表示件数
oLanguage	-	表示制御要素の文字列を指定。日本語化したいならばここで値を指定すること。
dom	lfrtip	表示制御要素の表示制御。lは表示件数の制御、fはフィルタリングの表示など。文字でそれぞれの表示制御の並びを指定する。
buttons	-	Extensionの追加指定と表示名の指定

お疲れ様でした。

jQuery入門道場

posted with amazlet at 18.07.21

株式会社フェンドーラ (2014-01-19)
売り上げランキング: 1,757

Amazon.co.jpで詳細を見る

昔からソートが出来るテーブル表はありましたがjavascriptで動作させる必要がありました。しかし今はjQueryのプラグインを使うことで簡単に導入する事ができます。

それが「DataTables」です。

jQueryプラグインDataTables

HTML テーブルをデータグリッド出来るようにするjQuery のプラグイン。

ソート機能や検索機能を加える

公式URL：http://datatables.net/index

基本導入例

ここでは基本的な動作のみの導入手順を記載していく。

導入サンプル

必要なファイルを読み込ませる

まずはstylesheetとscriptを読み込ませよう。

<head>
 …
<!--stylesheet-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css"/>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--Datatables-->
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
 …
</head>

テーブルデータを作成

テーブルデータを作成。idは「sample_tabledata」とする

<table id="sample_tabledata">
 <thead>
  <tr>
   <th>No.</th>
   <th>name</th>
   <th>pw</th>
   <th>gd</th>
   <th>sp</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>101</td>
   <td>10613</td>
   <td>12982</td>
   <td>15143</td>
  </tr>
  <tr>
   <th>2</th>
   <td>102</td>
   <td>11074</td>
   <td>12007</td>
   <td>15607</td>
  </tr>
 </tbody>
</table>

手順3

ヘッドタグの下(datatables.min.jsより下)にDataTablesを動かす記述を加える。

<head>
 … 
 <script>
 $(function(){
   $("#sample_tabledata").dataTable();
 })
 </script>
</head>

以上。これで基本的な動作は問題無い。導入サンプルは非常にシンプルに上の手順で導入したものなので、上手く行かない場合には良く見比べてみよう。

次回以降はオプションの紹介やcolvisを使った列表示の制御方法をまとめる予定

しかし今回Simplicity1.xから2.x台のバージョンにアップデートした際に、シェアボタンの表示に不具合が生じてしまったのでその時に行った対処方法を紹介します。

結論から言うとceltispackというプラグインのcssとの競合でした。

Simplicityの特徴

SEO施策済みでシンプル、Simplicityテーマの更新頻度も高いので安心して使うことが出来ます。

子テーマを用意してあってそちらでカスタマイズすれば、アップデートを行っても問題ない作りも好印象でお勧めのテーマです。

シェアボタンの表示不具合

simplicityのシェアボタンをバイラルタイプの表示にしたときに起こりました。アイコンマークが表示されず変な記号になってしまっている。

簡単に検索してみたところ報告がなかったので恐らくテーマの問題ではないと踏んで、プラグインを無効化していったところビンゴ。

celtispackを無効化したらシェアボタンの表示が正常に戻りました。

原因

結論から言えば、celtispackのトップページに戻る関連のCSSがシェアボタンのCSSと競合していました。

シェアボタンをバイラル表示にした際のHTML出力の一部が以下。

<span class="social-icon icon-twitter"></span>

celtispackのstyle.cssのスクロールボタン関連の記述の中で問題なのがセレクタの対象に「icon-」を使って居ることで、シェアボタンのcssと競合してしまっている。

フォントファミリーが変わってしまったことで文字化けしていたようだ。

 [class^="icon-"]:before, [class*=" icon-"]:before {
 font-family: "fontello";
 font-style: normal;
 font-weight: normal;
 speak: none;
 
～省略～

 /* Uncomment for 3D effect */
 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

対処方法

celtispack導入の目的がブログカードの生成だったのでシンプルに対象のCSSの記述を削除した。

調べたところ「Scroll Page Top」を追加した際に使うCSSのようなので使う予定がない場合は削除して問題ない。

対象セレクタの「[class^="icon-"]:before, [class*=" icon-"]:before 」部分の削除でも十分だが、255行目付近の「/* スクロールボタン 」部分を丸ごと削除した方が分かりやすいだろう。

問題

これについてはセレクタを汎用的にし過ぎましたね。「icon-*」というclassは付ける人も多いと思うのでsimplicityだけでなく他のテーマやプラグインにも影響が出る可能性があります。

注意した方がいいかもしれません。

ということで無事に治りました(^_^)/良かった良かった

Retina対応と言うと通常の画像をRetinaディスプレイで見ると画像がぼけたりすることについて対応するために、掲載するスペースの2倍や3倍の画像を用意するといった手法がとられます。縦横それぞれ2倍で作って半分のサイズで指定するって形ですね。

これで対応出来ない問題が発生したのです。

どんな問題が発生したのか

今回悩んだのは1pxの線を背景画像に使ったRetina対応です。(正確に言うとdpiが高いディスプレイで発生する為、所謂Retinaの定義に合わなくても発生するのですが)

今回、背景画像に1pxの破線を使ったのですが、FireFoxとIE、iPhoneにおいて一部の破線が見かけ太くなる問題が発生したのです。スクロールやズームをすると太くなる破線が変わる状況・・・(どうしたものか)

すぐにディスプレイの問題だろうから、Retina対応をすれば治るだろうと、ここまではピンときたのです。

しかし結局、上記のRetina対応に倣って、2倍にしたり3倍にしたりしてみたのですが無駄でした。

じゃあどうやって解決したか

解決方法は単純でした。1px*7pxで作った破線を2px(黒と透過を1pxずつ)*14pxで作り直し、CSSに下記のようにyを等倍、xを1/2で記載しました。

background-size: 7px 2px;

するとFireFoxもIEもiPhoneで見ても嘘のように綺麗になりました！

困っている人は試して見ると良いでしょう。

しかし根本的な解決ではないので、更に細かなディスプレイが出てきた時にはまた発生する恐れがあります・・・。

SVGなどで対応するのが一番なんでしょうね。とはいえ、要件で使えないのであればこういう工夫をせざるを得ないのです・・・くっ！