ios7 safariのURLバー、ステータスバー問題

ios7になって、safariのURLバーとステータスバーが伸びたり縮んだりする仕様になっています。

狭いスマホの画面をフルに活用するために実装した機能と思われます。これはこれでとても便利です。

ただしこのバー。伸びたり縮んだりしてもresizeイベントが発生しないのです。

例えばブラウザゲームのサイトとか、画面サイズを固定してるサイトでは死活問題となります。

画面下に操作ボタンとか設置してると、ステータスバーのせいで見えなくなったり、といった影響が考えられます。

ちなみにbody全体にoverfow:hiddenを設定してやると、URLバーとステータスバーは強制的に表示されるので、それで回避できるようです。画面は狭くなっちゃいますが。

そもそもoverfow:hiddenが使えない場合はお手上げです。

そんなわけで別のやり方を考える必要がありそうです。
上はロゴ、下はバナーとか、見えなくても差し支えないようなコンテンツを置いておくとか。

今後スマホサイトを作る上で注意すべき点だと思います。

jquery.hashchangeでスマホ用ページ遷移に対応

スマホサイトでよくある、#(ハッシュ)を使ったページ遷移をやろうと思って調べていたら、hashchangeというのがありました。

http://benalman.com/projects/jquery-hashchange-plugin/

jqueryのプラグインです。さっそく読み込んで使ってみます。

使い方は簡単。こんな感じです。

$(window).hashchange( function(){ 
  // URLハッシュが変わったら何かする
});

さらに

$(window).hashchange(function(){ 
  if(location.hash.match(/^#hash_/)) {
    // #hash_で始まる時に何かする
  }
});

こんな感じで、ハッシュの文字列によって処理を変えてやることで、目的が実現できそうな感じです。

それから最近ではhtml5のpushStateってのもあるみたいです。こちらは今度時間のあるときに調べてみます。

※pushStateはAndroid4.1以上でサポートされるようになったみたいです。普及にはまだ少し時間がかかりそうです。

1回のinsertでまとめて複数行を挿入する

DBMSはmysqlです。

1回のinsertでまとめて複数行挿入できないかな、できるんじゃないかな、と思って検索したら、やっぱりできました。

insertで複数行追加する

INSERT INTO user_table (id, name, memo, status) VALUES
(1, 'test1', 'メモ', 1),
(2, 'test2', 'メモ', 1),
(3, 'test3', 'メモ', 1),
(4, 'test4', 'メモ', 1);

こんな感じ。けっこう便利です。

混在アクティブコンテンツ "http://..." の読み込みをブロックしました

いつも使っているウェブアプリが動かなくなっていて、Firefoxのコンソールを見てみたら

混在アクティブコンテンツ "http://..." の読み込みをブロックしました

というエラーが出てました。

調べてみたところ、Firefoxバージョン23以降からセキュリティが強化され、今まで普通に動いていたものがエラーになったようです。

httpsのページからhttpのコンテンツを呼び出すとブロックされてしまうようです。

詳細はこちら→混在コンテンツ

とりあえず自分のケースでは呼び出すコンテンツがhttpsにも対応していたのでプロトコルを変更するだけで対応できました。

mobile safariでjqueryのliveが効かない

正しく設定しても、どうしてもliveが効かず、ボタンが反応しない、ということがありました。

しばらく試行錯誤した後、ググってみたら2秒で解決しました。

http://aqubiblog.blogspot.jp/2011/04/jqueryliveiphonesafari.html?m=1

該当要素に「onlick=""」を追加すれば動くようになるということです。驚きの解決方法。

これで問題なく動作するようになりましたが、思わず脱力してしまいました。

ユーザーエージェント「Serf」の大量アクセス

GoogleAnalyticsを見てたら「Serf」というブラウザ名で大量アクセスがあることに気がつきました。

Apacheのログを見てみたところ、「Serf」のユーザーエージェントは「Serf/1.1.0 mod_pagespeed/1.4.26.3-3101」となっています。

ここまで見てだいたい察しがつきました。先日興味本位で導入した「mod_pagespeed」の仕業でした。

携帯用GoogleAnalyticsはimgタグでga.phpを呼び出しているのですが、それが影響していたようです。


対処法はここに書いてあります。

https://developers.google.com/speed/pagespeed/module/faq

とりあえず /etc/httpd/conf.d/pagespeed.conf に

ModPagespeedDisallow "*/ga.php*"

を追記。

# service httpd configtest

で確認して問題なかったので、そのままhttpdを再起動しました。

翌日analyticsを確認したところSerfのアクセスは記録されなくなっていました。
平和が戻りました。

display:tableが便利

display:tableという、cssのプロパティがあります。
要素を擬似テーブルにすることができるというもので、こんなふうに使います。

<div style="display:table;">
  <div style="display:table-cell;">左</div>
  <div style="display:table-cell;">中央</div>
  <div style="display:table-cell;">右</div>
</div>

floatでも同じことができますが、display:tableのほうがだいぶ楽です。
崩れとかあまり気にしなくてよくなるし、cssの記述量もかなり減ると思います。


さらにwidth:100%とかvertical-alignとかも使えるのでかなり柔軟にレイアウトできるようになります。

例えばこんなのとか。

<div style="display:table;width:500px;">
  <div style="display:table-cell;background-color:orange;padding:10px;">左<br>左<br>左<br>左<br>左</div>
  <div style="display:table-cell;background-color:limegreen;width:100%;padding:10px;vertical-align:middle;text-align:center;">中央</div>
  <div style="display:table-cell;background-color:yellow;vertical-align:bottom;padding:10px;">右</div>
</div>

左
左
左
左
左

中央

右

各ブラウザの対応状況はこちらを参照。

http://fmbip.com/litmus/


気になるのはieの対応状況ですが、8以降は対応してるようです。

そろそろie7も切り捨てられる頃合いだと思うので、pcサイトでも今後は利用する機会が増えてくるんじゃないでしょうか。

自分はガンガン使っていこうと思ってます。

iphone、androidの幅固定ページ用viewport設定

500ピクセル幅固定のページをiphone、androidで最適化表示するために色々調べ、試しました。

最終的に以下に落ち着きました。
できればiphoneもandroidも共通のviewportにしたかったんですが、無理っぽかったのでユーザーエージェントで分けました。

<?php if(preg_match("/Android/", $_SERVER["HTTP_USER_AGENT"])): ?>
  <meta name="viewport" content="target-densitydpi=device-dpi, width=500px, initial-scale=1.0, user-scalable=yes">
<?php else: ?>
  <meta name="viewport" content="width=500px">
<?php endif; ?>

iphoneは「width=500px」を指定するだけでＯＫです。

問題はandroidです。
「width=500px」だけだと、まず最初にブラウザデフォルトのサイズでページをレンダリングし、ページをすべて読み込んだ"後に"widthを500pxに変更する、という仕様になってるようです。

一回読み込んだ後変更するので、文字の改行位置が変わったりして、ページがカクカク動いてしまいます。

そこで登場するのが「target-densitydpi=device-dpi」。
このandroid独自の属性を指定することで、表示が最適化されます。


とりあえずこれで問題は解決。iphoneでもandroidでもビシっと表示がキマるようになりました。


とは言ってもやはりスマホページは固定幅は不向きです。特にandroidは変な動きが多いです。

ユーザビリティのことを考えても、スマホに最適化したページを作ったほうが、間違いなく良いです。


参考ページ
http://www.tasuhiku.com/tips/214

Androidブラウザの「パソコンサイト表示」のユーザーエージェント

スマホはHTC EVO 3D(ISW12HT)を使ってます。

Androidブラウザのユーザーエージェントはこんな感じです。

Mozilla/5.0 (Linux; U; Android 4.0.3; ja-jp; ISW12HT Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

androidブラウザの設定で「パソコンサイト表示」というのがあります。



これをチェックした状態でユーザーエージェントを見ると、以下になりました。

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24

見ての通り、Chromeに変わりました。


これは今自分が使ってるChromeのユーザーエージェント。OSとバージョン以外は全く同じです。

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

Google ReaderからFeedlyへの移行時に設定すべきたったひとつのこと (Android用)

フォントを変えましょう。

デフォルトのフォントだと、こんな感じです。



何か変です。タイトルが表示されていないので、この状態だとほとんど使いものになりません。

Advanced Settingsからフォントを「Sans Serif」に変更します。(Sol、Robotoでも大丈夫っぽいです)



するとこのようにタイトルが表示されるようになります。



これでマトモに使えるようになりました。

Google Readerとそれほど変わらない操作性です。このままFeedlyを使っていこうと思います。

text-decorationを親要素と子要素両方に指定すると

親要素には効くけど、子要素には効きません。

↓こういうコードを書いたら

<span style="text-decoration:underline;">親要素のspan<span style="text-decoration:none;">子要素のspan</span>親要素のspan</span>

↓こうなって欲しいところですが、

親要素のspan子要素のspan親要素のspan


↓実際はこうなります。

親要素のspan子要素のspan親要素のspan

そういう仕様になってるとのことです。

参考ページ
http://www.mozilla.gr.jp/standards/webtips0002.html

Android4.0でブラウザのキャッシュを削除

ブラウザ開く
　↓
メニューボタンをタップ
　↓
設定
　↓
プライバシーとセキュリティ
　↓
キャッシュを消去

mod_pagespeedをインストールしてみた

してみました。

Apacheのモジュールで、導入するとページの表示が劇的に早くなるということです。

インストールについてはこちらのページを参考にさせていただきました。
http://d.hatena.ne.jp/eco31/20101119/1290157894

$ sudo yum install at
$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm
$ sudo rpm -U mod-pagespeed-stable_current_x86_64.rpm
$ sudo /sbin/service httpd restart

3行目のところでwarningが出ましたが、インストール自体は問題ないようです。
warning: mod-pagespeed-stable_current_x86_64.rpm: Header V4 DSA signature: NOKEY, key ID .....

Apache再起動して確認したところ、なんとなくページの表示が早くなったような感じが。

とりあえずしばらく様子を見てみようと思います。

Youtube埋め込みプレーヤーでシークバーを表示する／隠す

autohideのパラメーターを使います。

autohide=0：シークバー(とコントロールバー)が常時表示される(デフォルト)
autohide=1：マウスカーソルを乗せてるときだけシークバー(とコントロールバー)が表示される

autohide=0

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?autohide=0" frameborder="0" allowfullscreen></iframe>





autohide=1

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?autohide=1" frameborder="0" allowfullscreen></iframe>

ie8でyoutube埋め込みプレーヤーのバグ

youtube埋め込みプレーヤー(iframe)を操作するとie8のみ画面が真っ暗になる、という不具合に遭遇しました。
ie8のみのバグみたいです。

対処法はこちらのページを参考にさせてもらいました。
http://blog.romeolynx.com/article/52365723.html

サンプル作ってみました。
ie8で「消す」のボタンをクリックすると画面が真っ黒になります。
「消す2」のほうはバグ回避してるので普通に消えます。

<script>
function deleteIframe() { $('#youtube_wrapper div').replaceWith("<span>iframeを消した</span>"); }
function deleteIframe2() { $('#youtube_wrapper iframe').attr('src',''); $('#youtube_wrapper div').replaceWith("<span>iframeを消した2</span>"); }
</script>

<div id="youtube_wrapper" style="padding:20px;width:240px;height:180px;background-color:yellow;">
  <div>
    <iframe id="player" width="240" height="180" src="http://www.youtube.com/embed/2Iiy_YfpVn0?enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<button type="button" onclick="deleteIframe();">消す</button>
<button type="button" onclick="deleteIframe2();">消す2</button>


phpでxmlの名前空間を取得する

まず最初に名前空間とは。

<item>
<title>タイトル</title>
<link>http://www.example.com/</link>
<description>説明</description>
<pubDate>yyyy/mm/dd</pubDate>
<media:content url="http://www.example.com/path/to/jpg/hoge.jpg" type="image/jpeg" height="743" width="1024"/>
</item>

太字の部分が名前空間。htmlで言うとタグの属性に似てます。


phpのsimplexml_load_file関数はとても便利で、

$xml = "http://www.example.com/path/to/rss/hoge.rss";
$data = simplexml_load_file($xml);

こんな風にするだけで簡単にxmlを解析してphpオブジェクトに変換してくれます。

ただこれだけだと名前空間部分はスルーされてしまいます。

名前空間に欲しい情報がある場合、例えばこの例では

$data->children("media", true)->content->attributes()->url;

という感じでようやく取得できます。

非常に面倒ですが、とりあえずこのやり方で取得できます。

参考ページ
http://blog.mach3.jp/2010/12/various-xml-on-php.html

テーマのテスト表示ができるプラグイン「Theme Test Drive」

Wordpressでテーマを編集する場合、ローカルに同じ環境を作ったりしてやってたんですが、「Theme Test Drive」というプラグインがあるのを知ってさっそく試してみました。

Theme Test Drive：http://wordpress.org/extend/plugins/theme-test-drive/

Test Drive用のテーマを1つ割り当てることができ、管理者ログインしてるとそのテーマで表示、一般ユーザーにはデフォルトのテーマが適用される、というものです。便利です。

使い方はこのあたりのページを参考にさせてもらいました。
http://lifehacking.jp/2012/07/wp-theme-test-drive/
http://kinomemo.info/create/1025/

phpで送信するメールが勝手に1000バイト目あたりで改行される

ということがあって、そのせいで文字化けしたり、レイアウトが崩れたりということがありました。

調べてみたところphp側の問題ではなく、MTAで勝手に改行を入れている様子。

http://alley.way-nifty.com/han/2005/09/outlook_express_cda5.html

http://www.geek.sc/archives/743


そもそもメールというものは適宜改行を入れて書くものであって、1行に1000バイト以上書いてはいけない、という決まりになってるそうです。まだメモリが高価で容量が少なかった時の名残だそうです。

面倒ですけど1000バイトの手間で改行を入れてやるしかなさそうです。

cssの:before、:afterがけっこう便利

今更ながらその便利さに気が付きました。

<style type="text/css">
.before_after_test1:before { content: "("; }
.before_after_test1:after { content: ")"; }
.before_after_test2:before { content: "[ "; }
.before_after_test2:after { content: " ]"; }
</style>

<div class="before_after_test1">カッコ1</div>
<div class="before_after_test2">カッコ2</div>

↑こうすると

↓こうなります

カッコ1

カッコ2

・　・　・

こんなことも

<style type="text/css">
.before_after_on:before { content: "スイッチオン："; }
.before_after_off:before { content: "スイッチオフ："; }
</style>

<div class="before_after_test3 before_after_off" style="text-decoration:underline;color:blue;cursor:pointer;">ここをクリック</div>

<script type="text/javascript">
$(function(){
$('.before_after_test3').click(function(){ $(this).toggleClass('before_after_on').toggleClass('before_after_off'); });
});
</script>

ここをクリック

うまく使えばきれいなコードが書けると思います。

Youtube埋め込みプレーヤーで関連動画を表示しない

iframeで参照するURLに「?rel=0」をつけるだけです。

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?rel=0" frameborder="0" allowfullscreen></iframe>

関連動画有り


関連動画無し

phpで配列の最初と最後を取得する

$tmp_array = array('111','222','333','444','555');

$array_last = end($tmp_array);
$array_first = reset($tmp_array);

echo $array_last;
echo $array_first;

結果は以下になります。

555
111

ググると参考になるページが出てくるので詳細はそちらを参照してください。

Windowsのフリーソフトでテキストファイル結合

Windows上で複数のcsvファイルを結合して1つにまとめる、という作業をやりました。

このTextBinderというソフトにお世話になりました。

http://pckowazafreesoft.ojaru.jp/html/freesoft_textbinder.html

結合したいファイルをドラッグ＆ドロップでTextBinderに投げ込んで結合ボタンを押すだけ、シンプル簡単快速なおすすめのソフトです。

Youtubeの埋め込みプレーヤーで使えるパラメーター

このページに無茶苦茶詳しく載ってました。
http://wisdommingle.com/youtube-embedded-player-parameter-customize/

デフォルトがこれ。

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?rel=0" frameborder="0" allowfullscreen></iframe>


黒帯とか各種UIなどを外してこんな風にシンプルにすることもできます。
Youtubeのウォーターマークだけになってます。

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?rel=0&modestbranding=0&showinfo=0&fs=1&controls=0&autohide=1" frameborder="0" allowfullscreen></iframe>


とりあえずやったのはこれだけですが、パラメーターを使って結構細かいところまで指定できるようです。

秀丸でカーソル行(現在行)を強調表示する設定

その他
↓
ファイルタイプ別の設定
↓
デザイン
↓
カーソル行を選択してプロパティで指定

お好みで下線を入れたり背景色を変えたりできます。

googleで検索すると古いコンテンツがヒットしますが、バージョンアップでUIが変わっているので役にたちません。

というわけでやり方をメモっておきます。

cwRsyncでWindowsでもrsyncを利用する

cwRsyncとは、WindowsでRsyncが使えるツールです。
cygwinを利用して動いてるようです。非常に便利です。

cwRsyncの取得は以下のページから。
https://www.itefix.no/i2/cwrsync

そして次のページを開くとショッピングカート画面になります。
ここで上部の「Free Edition」とあるタブをクリックすると、古いバージョンをフリーで取得できます。

使い方は「cwrsync」でググります。

参考までに自分が使ってるbatファイルを貼り付けておきます。
これはdry-runオプション入りです。

cd /D C:\Program Files (x86)\cwRsync\bin

rsync.exe --dry-run -rv -e "\"/cygdrive/c/Program Files (x86)/cwRsync/bin/ssh.exe\"" /cygdrive/c/path/to/file/ user@example.com:/path/to/upload

Oracleの分析関数

Oracleは9iから分析関数というのが使えるようになってます。

ちょっと前にグループごとに通し番号をふるというのをやったんですが、それも分析関数を使ってます。

このへんのページが詳しいです。
http://www.geocities.jp/oraclesqlpuzzle/oracle-sql1-olap.html


レポートを出すときとか、すごく役に立つと思われます。

またこの分析関数、mysqlでも使えるようです。

今すぐ使うってわけじゃないですけど、覚えておけばそのうち必ず使えると思うのでメモしておきます。

コマンドラインでphpを実行すると文字化けする時の対処方法

ini_set("mbstring.internal_encoding", "utf8");

これで直りました。utf8のところは適宜文字コードに合わせてsjisとかにします。

Apache経由とコマンドラインでは文字コード設定が異なることがあり、それが原因でブラウザでのアクセスは問題ないのに、コマンドラインから実行すると文字化けする、ということが起こるようです。

レンタルサーバーなどによってはそういう設定になってることもあるので、cron等でコマンドラインからphpを動かす時は注意したほうが良いようです。

Google Analytics APIを使ったアクセス数ランキング

を作りました。

右サイドバーにあるアクセス数ランキングがそれです。

以下、参考にさせてもらったページです。
http://log.noiretaya.com/132
http://shared-blog.kddi-web.com/smartrelease/45
http://webimemo.com/wordpress/4402

参考というか、ほぼそのまんま使わせてもらいました。

これからAnalytics APIについて色々調べていく予定で、まずは第一歩としてアクセス数ランキングを作ってみました。

Oracleで小数点の桁数を揃える

1.01
2
3.5


みたいな小数点がバラバラな数値を

1.01
2.00
3.50

のように小数点の桁数を揃えたい。

そんな時はこんな感じで。

trim(to_char(COLUMN,'9.99'))

to_charで桁数を揃えますが、その際に半角スペースが入ってしまうので、trimで消しています。

参考ページ
http://otn.oracle.co.jp/forum/thread.jspa?threadID=3003768&switchMode=threaded

phpのdate関数で月日の頭にゼロを付けないで表示

ちょくちょく使うけど、いつも忘れてググるハメになるのでメモ。

2013年4月5日の場合、

date('Y/m/d');

結果→ 2013/04/05

date('Y/n/j');

結果→ 2013/4/5

.htaccessでphpのショートタグ(これ→)を使えるようにする

ショートタグはphp.iniで無効にしてるんですが、たまに必要になるときがあります。

そんな時は.htaccessに以下を書いて特定のディレクトリ下だけ有効にしてます。

php_flag short_open_tag on

以上。

URLに応じて条件分岐するphpサンプル(正規表現)

URL(パス)に応じて条件分岐させるコードを書いたのでサンプルとして残しておきます。

URLでの分岐はドメインとかファイル名とか色々ありますが、これはパス(ディレクトリ)で分岐させる、非常に簡単な例です。

<?php if(preg_match("#^/blog/archive/#",$_SERVER["REQUEST_URI"])): ?>

http://example.com/blog/archive/ 以下で表示される。

<?php elseif(preg_match("#^/blog/#",$_SERVER["REQUEST_URI"])): ?>

http://example.com/blog/ 以下で表示される。

<?php elseif(preg_match("#^/company/#",$_SERVER["REQUEST_URI"])): ?>

http://example.com/company/ 以下で表示される。

<?php else: ?>

その他

<?php endif; ?>


Windows7でクイック起動バーが消えた

自分はクイック起動が好きで、ブラウザ、メーラー、秀丸、デスクトップ表示をクイック起動バーに置いてます。

なんですが、気付いたらクイック起動バーがごっそり消えてました。何もしてないと思うんですが・・

無いと困るので、復活させる方法を調べてみました。

http://www.724685.com/weekly/qa091223.htm

こちらの方法で無事復活。


しかしクイック起動のパスが

C:\Users\ユーザー名\QuickLaunch

だったのが、

C:\Users\ユーザー名\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch

に変わってました。

なんか納得できませんが、とりあえず元に戻ったので良しとします。


追記

また同じ現象が起こったのでもう一度調べてみたところ、なんらかの原因でエクスプローラーが落ち、それでタスクバーが消えたということらしいです。
上述のクイック起動のパスを変えるやる方は関係ないみたいです。

http://vista.win7.jp/hkv1006.htm

このやり方でエクスプローラーを起動しなおしたら、クイック起動バーも復活しました。

C:\Windows\explorer.exe

を起動し直してやればいいんですが、面倒ですね。。

Cドライブ容量圧迫の原因はC:\Users\[ユーザー名]\AppData\Roaming\にあった (Windows7)

しばらく前からCドライブの容量不足に悩まされており、MacDriveを買ってファイルを移動するなどしたものの、抜本的な解決には至りません。

いくらなんでもここまで容量が圧迫されるのはおかしい、どこかでファイルが肥大化してるか増え続けてるんじゃないか、と思って調べてみたところ、「C:\Users\[ユーザー名]\AppData\Roaming」が50GBもあるのを突き止めました。

さらに辿って行くと「C:\Users\[ユーザー名]\AppData\Roaming\Adobe\Common\Media Cache Files」に大量のAdobe Premiere Elementsのキャッシュファイルが。

犯人はPremiere Elementsでした。

自分はPremiere Elementsで動画編集をしてるんですが、キャッシュが溜まり続けていたようです。

削除したらCドライブの容量が一気に半分に減りました。。

ちなみに\AppData\Roamingはいろんなアプリで使うファイルが格納されていて、iTunesを使っているとiPhoneやiPadのバックアップファイルがここに溜められていくそうで、Cドライブが圧迫される原因になることがあるようです。

Cドライブの容量が足りなくて困っている人は、とりあえず\AppData\Roamingを調べてみると良いかもしれません。

Grid.js(superTables後継)とjquery.tablefixでテーブルを固定

javascriptでテーブルのヘッダや左側の項目なんかを固定するライブラリはかなりたくさん出てます。

なかでも名前のインパクトからか、superTablesなんかは自分の中で有名です。

今回テーブルのヘッダと左側の項目を固定する仕事があったので、ちょっと調べて見ることに。

まずはsuperTables。

でもググっても公式ページが出てこない。どこからダウンロードすればいいんだ？？

と思ってたら今はGridというのに名前が変わってるんだそうです。

http://www.matts411.com/post/grid/

アップデートされてるのはいいですが、明らかに検索しにくい名前になってしまったのはちょっと残念です。

さっそく使ってみます。
grid.jsは内で読み込まないと動かないという現象で少しつまづきましたが、動作は問題ありません。
あとは要素をしっかりとで囲ってやるのを忘れずに。

それからひとつ問題が。rowspanやcolspanを使ってると表示がおかしくなります。
対応してないのかな、と思ってGridのページを見てみると、作者じきじきに「unfortunately not at the moment.」と言ってます。

残念ですが、rowspanやcolspanを使ってるとGridはうまく動かないようです。


続いて目をつけたのがjquery.tablefix。

http://www.otchy.net/javascript/tablefix/

作者は日本人。しかもrowspanとcolspanにも対応してるようで、作者ページのサンプルもrowspanとcolspanが使われてます。

よし、これで勝つる！と思ったのも束の間。実装してみると少しカラムがずれるという現象が発生。

どうやらrowspanやcolspanも、ちょっと複雑になると対応できないみたいです。
具体的にどこまでがセーフでどこからがアウトなのかはわかりませんが、自分のケースではズレてしまいました。


あとjquery.tablefixでは、テーブルの中にフォームが入ってると、そのフォームは機能しなくなります。

逆にGridのほうはフォームは有効だそうです。


というわけで今のところ解決してません。

とりあえず言えるのは、テーブルの構造はなるべくシンプルにしておいたほうが良い、ということでしょうか。

他のライブラリも含め、もう少し調べてみようと思います。


追記：
こちらのページがとても参考になります。
http://defghi1977-onblog.blogspot.jp/2012/02/blog-post_09.html

jquery.livesearchでサジェストっぽいのを作る

サジェストっぽいのを作りました。



別ウインドウで表示→http://kawama.jp/sample/jquery_livesearch.php

ソースを見てもらえば分かりますが、jquery.livesearchというライブラリを使い、ul liの中のテキストを検索してマッチするものを表示しています。

本格的なサジェスト機能はajaxが必須ですが、ちょっとサジェストっぽいものを作りたい時はこのやり方も使える思います。

HTMLのLHタグ

<lh>タグというのがあるのを知りました。
<ul><li>のリストのヘッダのタグです。List Headerの略です。

<th>があるんだから<lh>があってもおかしくないと思います。

ただHTML3.0の時に出現してお蔵入りになった要素だそうで、一般的にはあまり使われていません。

http://www.nirui.com/2nd/yuu/html/list/lh.html
http://www.asahi-net.or.jp/~jy3k-sm/i_net/lh.html

なので、googleで「html LH」を調べてもほとんどヒットしません。

あればあったでそれなりに使えそうなタグだと思います。

ただし前述のように正式にサポートされていないので、使う場合は多少のリスクはあると思います。

秀丸マクロで複数の置換を一括で処理

秀丸でテキストファイル内の文字列置換を10個ほどやる件があったんですが、1個ずつ置換するのは面倒です。

そこでマクロとかないかな～と思って探したらありました。

http://hide.maruo.co.jp/lib/macro/listreplace211.html

あ，ア
い，イ
う，ウ
え，エ
お，オ

こんな風にテキストファイルに置換リストを書いておき、それを読ませると上から順番に一括で処理してくれます。

ちなみにWindows7だとマクロを置くフォルダはここになります。よく忘れるのでメモしてきます。

C:\Users\ユーザー名\AppData\Roaming\Hidemaruo\Hidemaru\Macro

それからこのマクロを動かすには田楽DLLというのが必要でした。
http://hide.maruo.co.jp/lib/macro/dgdll250.html

DLLを秀丸フォルダに投入すると、思った通りに一括置換が実行されました。

Photoshop Elementsでカスタムシェイプを追加登録する

拾ってきた.cshファイル(カスタムシェイプ)をPhotoshop Elementsに追加しようと思ったのですが、カスタムシェイプツールの横の▼を押しても「ファイルの読み込み」みたいな選択肢がありません。

もしかしてPhotoshop Elementsはカスタムシェイプ追加できないの！？

と思ったのですが、インターフェースがないだけで、Presetsの下に直接入れれば追加はできるようです。

自分の環境では以下のフォルダに.cshファイルを入れ、Photoshop Elementsを再起動したら追加されてました。

C:\Program Files (x86)\Adobe\Photoshop Elements 11\Presets\Custom Shapes

Photoshop Elements 11を購入

とりあえず体験版をインストール。

そしてこのページを見ながら試用してみました。
http://allabout.co.jp/gm/gc/400510/

いやー、切り抜きがやりやすいです。

これまでCS2を使ってたんですが、ものすごい進化してます。

というわけでさっそくAmazonでポチりました。



パッケージ版とダウンロード版の両方あるんですが、値段が同じってのはちょっと納得いかないですね。

安ければＤＬ版を買いたいんですが、値段が同じなのでパッケージ版を買いました。

javascriptでiframeの高さを取得する

iframeで呼び出すページの高さを取得し、親ページ側でiframeのheightを最適化します。

実現にはいろいろな方法がありますが、この方法はiframeと親ページの両方にスクリプトを設置するやり方になります。クロスドメインで使えます。

まずiframe側に設置するスクリプト。
#containerの高さを取得して親ページに数値を渡します。

<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
    if (typeof target != "undefined" && document.body.scrollHeight)
        target.postMessage(document.getElementById("container").scrollHeight, "*");
}
</script>


続いて親ページ側のスクリプト。
iframeから数値を受け取って高さを指定します。

<script type="text/javascript">
try { window.addEventListener("message", receiveSize, false); } 
catch(e) { window.attachEvent("onmessage", receiveSize); }

var rcnt = 0, new_height = 0;
function receiveSize(e) {
    new_height = Number(e.data)+30;
    document.getElementById("target_iframe").style.height = new_height + "px";
}
</script>

以上です。

参考にさせてもらったページはあったんですが、失念してしまいました。

ie6と7だけ効くお手軽cssハック

/margin-top:-10px;

こんな感じで頭にスラッシュを入れるだけです。便利。

こちらにcssハックが一覧でまとめられていて見やすいです。
http://www.webcreatorbox.com/tech/css-hack-list/

ie7でliに隙間ができるのを解消する


<li><a href="http://kawama.jp/"><div>text text text</div></a></li>
<li><a href="http://kawama.jp/"><div>text text text</div></a></li>
<li><a href="http://kawama.jp/"><div>text text text</div></a></li>


こんなリストがあって、ie7のみ下に隙間ができてしまっていました。

vertical-align: bottom;

を適用することで解決しました。

このへんのページを参考にさせてもらいました。
http://nrhr.net/diary/1121/
http://webdesignrecipes.com/css-selectors-and-properties-with-ie7/

mysqlでランダムな10桁の文字列を作る

select substring(md5(rand()), 1 , 10)

こんな感じで。
もちろんユニークにはならないです。

[Oracle] ROW_NUMBERでグループごとに連番を割り当てる

ROW_NUMBERを使うとグループごとに連番の割り当てが可能です。

参考ページはこちら。
http://blog.livedoor.jp/akf0/archives/51421581.html

便利です。

Oracleの隠し関数「wm_concat」

Oracleに「wm_concat」という関数があることを知りました。隠し関数だそうです。

使い方はこのあたりを参考にさせていただきました。
http://blog.livedoor.jp/dd0125/archives/381992.html

上記の記事からそのまま抜粋させていただきます。

テーブル名: HOGE
ID STR
1 A
1 B
1 C
2 C
2 D

というデータがあった場合、

SELECT ID , wmsys.wm_concat(STR) AS STR
FROM HOGE
GROUP BY ID

とSQLを打つと、

ID STR
1 A,B,C
2 C,D

と返ってくる

この関数を使えば、SQLで出来ることがかなり幅が広がると思います。

TCPDFでPDF出力

TCPDFというのをつかってみました。

こちらなどを参考にさせてもらいました。
http://log.noiretaya.com/44

レイアウトはhtmlも使えるし、関数を使って画像を配置したり罫線を引いたりすることもできます。

htmlのサポートはかなり貧弱です。その点はmPDFのほうが優れています。

まだあまり使い込んではいませんが、ライブラリごとに特徴があるので、よく吟味して使うといいと思います。

しかしPDFの出力もなかなか大変ですね。

mPDFで使うフォントを変更する

mPDFで標準以外のフォントを使う方法を探したら、こちらのページがヒットしました。

http://d.hatena.ne.jp/tohokuaiki/20121113/1352810525

メイリオとArialを入れました。


それとこちらはmPDFでのcssプロパティのテスト結果。

http://www.whims-d.com/archives/181

効かないプロパティがけっこうあるので注意が必要です。

Safariの開発メニュー

Safariにも開発メニューがあります。デバッグで使えます。

http://blog.earthyworld.com/archives/windows-safari-useragent/

なんか見覚えあるUIだなぁ、と思ったらChromeと同じでした。

同じWebkit系だから似てる(というかほぼ同じ)んだと思います。

phpでhtmlをpdfに変換できるライブラリ「mPDF」

mPDFというライブラリがあることを知り、さっそく試してみました。

こちらのページを参考にしました。
http://blog.syuhari.jp/archives/1992

簡単です。
htmlがpdfになります。

でも日本語が文字化けしてしまいます。

ググってみたら、バージョン5.1以降ではライブラリ本体のソースをいじらないと日本語対応できないとのこと。

http://d.hatena.ne.jp/susan-style/20120321/1332308489


こちらのページの通りに修正したら、無事日本語表示できました。