2015年2月27日金曜日

phpMyAdmin: 大きな SQL ファイルがインポートできない

 SQL をインポートしようとした時に以下のエラーが発生
Warning: POST Content-Length of 10025724 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
アップロードしようとしたファイルが大きすぎるようです。この制限に関する対策については ドキュメント をご覧ください。

php.ini でアップロードできるファイルサイズと、
POST で送信できるデータサイズを大きくすると解消できる。
# アップロードできるファイルサイズを増やす
upload_max_filesize = 50M

# POST で送信できるデータサイズ
post_max_size = 50M


2015年2月23日月曜日

WordPress: エディタに設定した padding が無視される

WordPress のデフォルトのスタイルに !important が付加されているため、
editor-style.css などで設定したスタイルが無視されている可能性が高い。

該当するスタイルに !important を付加して、
優先順位をデフォルトのスタイルよりも高く設定すれば反映される。
body#tinymce.wp-editor {
    background-color: #FFFFFF;
    padding: 55px 12px 50px 12px !important;
    width: 642px;
}


2015年2月21日土曜日

Apache: さくらのレンタルサーバで「options not allowed here」

別サーバからさくらのレンタルサーバへファイルを移行した際に、
タイトルのエラーが発生して 500 (Internal Server Error)を返すようになった。

原因は .htaccess 内で「Options +FollowSymLinks」が存在していたこと。
さくらのレンタルサーバ上では上記オプションが使用できずエラーになるらしい。
該当箇所をコメントアウトしたところページが表示されるようになった。
Options +FollowSymLinks
↓
# Options +FollowSymLink

2015年2月20日金曜日

WordPress: 投稿のアイキャッチ画像を設定できるようにする

WordPress の投稿にはアイキャッチ画像を設定できる。

デフォルトでは設定するインタフェースが表示されていないが、
テーマ内の functions.php に以下のコードを追加すると表示される。
if(function_exists('add_theme_support')) {
    add_theme_support('post-thumbnails');
}



add_theme_support()
http://wpdocs.sourceforge.jp/関数リファレンス/add_theme_support

2015年2月18日水曜日

HTML: JavaScript で書き換えられる前のソースコードを取得

ページ読み込み時に JavaScript が HTML の内容を書き換えることで、
広告や Twitter のタイムラインを表示するページが多くある。

サイトの移植などで、元のファイルに直接アクセスできず、
ブラウザのデバッグツールで HTML 等をコピーしてくる場合、
JavaScript の使用をOFFにした状態でデバッグツールから HTML を取得すると、
JavaScript で書き換えられる前の元のソースコードを取得することができる。

広告や Twitter タイムラインなど、
読み込み直後に書き換えられるページを移植する場合に便利。

2015年2月17日火曜日

Chromeアプリ: <webview>はドキュメントに追加されたときに動作する

JavaScript でオブジェクトを作成した際にはロードされない。
DOM に追加されてはじめて src が読み込まれる。

// ここでは読み込まれない
var webview = $('<webview src="http://yokano-jp.blogspot.jp/"></webview>');
webview.on('loadstop', function() {
    console.log('loaded');
});

// ここではじめて読み込まれる
$('body').append(webview);

2015年2月15日日曜日

Mac: Numbers で連番を作成

Excel の場合は連番になっているセルを選択して、
右下のハンドルをドラッグすると連番を作成できた。

Numbers の場合は連番になっているセルを選択して、
下部中央の黄色いハンドルをドラッグすると連番を作成できる。
右下の白いハンドルは違うので注意。


2015年2月10日火曜日

Chrome: 見えない <webview> で操作を行う

Chrome アプリ内に見えない <webview> を設置したい場合は、
幅と高さを 0px にすればよい。
<webview src="http://hogehoge.com/" style="height: 0px; width: 0px;"></webview>

display: hidden; にすると埋め込んだスクリプトが実行されなくなるので注意。
<webview src="http://hogehoge.com/" style="display: none;"></webview>

jQuery:onclick イベントが動作しない場合

jQuery() から要素をクリックする場合は以下のように .click() や .trigger('click') が使用できる。
// .click() を使う場合
$('#my_element').click();

// .trigger() を使う場合
$('#my_element').trigger('click');

しかし、詳しい原因はわかっていないが上記の処理で発動しないケースがあった。
その場合は、DOM を取得して DOM の .click() を実行すると通る場合がある。
// DOM の click() を呼び出す
$('#my_element').get(0).click();

2015年2月8日日曜日

Chrome アプリ:<webview> から親要素へオブジェクトを渡す

Chrome アプリの <webview> から親要素(embedder)にデータを渡す際に console.log() を使う方法がある。

<webview> 内で console.log() を使用すると、<webview> の consolemessage イベントが実行される。
JSON データを console.log() で出力して、親側で受け取れば複雑なオブジェクトも渡すことができる。


親要素側
var webview = $('#my_webview');
webview.on('consolemessage', function(e) {
    var message = e.originalEvent.message;
    try {
        var datas = JSON.parse(message);
        console.log(' からデータを受け取りました', datas);
    } catch(e) {
        console.log(' からログが発行されました', message);
    }
});

webview 側
var result = {
    id: 1,
    value: 1234
};
var json = JSON.stringify(result);
console.log(json);

2015年2月7日土曜日

JavaScript: <input type="image"> で座標を送る

<form> 内の <input type="image"> は画像をクリックした時の、
マウスカーソルの座標(画像の左上の 0,0 とする相対座標)も送信する。

jQuery でお手軽にクリックイベントを実行すると、
座標として x = 0, y = 0 が送られる。

JavaScript による自動クリックの対策として、
<input type="image"> のクリック時の座標がセットされていることや、
(0, 0)以外の座標でなければリクエストを拒否するサイトも存在する。

JavaScript から座標をそれっぽく送りたい場合は、
createEvent() と initMouseEvent() で
座標を指定したマウスクリックイベントを作成・実行すれば良い。
// 検索ボタン(をクリックする場合)
var searchButton = document.querySelector('input[name=search]');
var event = document.createEvent('MouseEvents');
event.initMouseEvent(
 'click',
 true,
 true,
 window,
 0,
 0,
 0,
 $(searchButton).position().left + 15,  // X = 15
 $(searchButton).position().top + 15,  // Y = 15
 false,
 false,
 false,
 false,
 0,
 null
);
searchButton.dispatchEvent(event);


参考
<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった | それマグで!
http://takuya-1st.hatenablog.jp/entry/2014/12/05/145944

2015年2月5日木曜日

Word:改行記号を非表示にする

MS Word 2013 の場合
ファイル → オプション → 表示 → 常に画面に表示する編集記号
段落記号をOFF



Word のオートシェイプなどで作成した図形は、
Web 用に保存を選択しても画像として出力されない。

Word の画面を直接スクリーンショットで撮影して、
ページに貼り付けてしまうのが早い。

スクリーンショットを取る場合には、
波線や改行記号が邪魔になるため非表示にした状態で撮影したほうが良い。

Chromeアプリ:<webview>を使ったセッション(Cookie)の共有

Chrome アプリでは外部サイトを表示するために <webview> が使用できる。
ただし会員サイトなどログインが必要な場合など、
ログイン状態を保存するために Cookie を複数の <webview> で保存したい時がある。

<webview> の partition 属性に共通した文字列を渡しておくと、
複数の <webview> 間で Cookie が共有されるようになる。
<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px" partition="persist:googlepluswidgets"></webview>

webview Tag - Google Chrome
https://developer.chrome.com/apps/tags/webview

2015年2月4日水曜日

jQuery: 要素内の HTML を無視したテキストを取る

.html() だと HTML を含めた内容を取れる。
.text() だと HTML を無視した内容を取れる。
HTML
<div id="my-div">Hello <strong>World !</strong></div>
$('#my-div').html();  // Hello <strong>World !</strong>
$('#my-div').text();  // Hello World !

2015年2月3日火曜日

Facebook はコンソールに盛大に警告を出している

Facebook ログインページで Web ブラウザのデバッグコンソールを出すと、
盛大に警告される。


コンソールに JS を貼り付けて、
アカウントの乗っ取りなどがされないように注意文を書いている。

2015年2月2日月曜日

Chrome アプリ:<webview> は描画されていなくても動作する

<webview> では partition を設定することでクッキーの保存が可能であるため、
ログインした状態でセッションを継続させるために利用できる。

<webview> に外部サイトのログイン画面を表示して、
JavaScript でフォーム入力・送信すれば自動的にクッキーが <webview> に保存される。

これらの処理は <webview> を隠した状態で動作させられる。
例えば height: 0px にしたり、visibility: hidden; を指定すれば良い。


/* CSS */
#my-webview {
    display: hidden;
}
<!-- HTML -->
<webview id="my-webview" src="http://target-site.com/login" partition="persist:googlepluswidgets"></webview>
/* JavaScript(jQuery) */
$('#my-webview').on('loadstop', function() {
    var doc = $(this.contentWindow.document);
    doc.find('#login-id').val('my_id');
    doc.find('#login-pass').val('my_pass');
    doc.find('#login-submit').click();
});

2015年2月1日日曜日

Chrome アプリ: 内の console.log() を jQuery で取得

Chrome アプリでは <webview> 要素を設置することで、
外部サイトをアプリ内に表示することができる。

<webview> 内で発生するイベントは、
<webview> を含む親(embedder)から JavaScript 経由で取得できる。

<webview> 内で console.log() を使用する場合は、
consolemessage イベントを使って親要素側で改めて出力しなければ確認できない。

jQuery の場合は originalEvent の中に入っているイベントから取得する必要がある。
var webview = $('#my-webview');

// webview 内で console.log() が使用されると consolemessage イベントが発生
webview.on('consolemessage', function(e) {
    // 引数内の originalEvent.message にメッセージが渡される
    console.log(e.originalEvent.message);
});

jQuery の .on() でバインドした場合は、
本来のイベントオブジェクトは originalEvent 内に格納されるので注意。