2014年4月30日水曜日

JavaScript: 画像をリロードする

JavaScript から <img> 要素の src 属性を変更すると自動的に画像が更新されます。
ただし既にセットされている src と同じものを入力しても再読込されません。
こういった場合は URL にクエリパラメータを付加すると再読み込みが行われます。
クエリパラメータはキャッシュされないように毎回異なるものをセットします。
var src = 'http://example.com/example.jpg';
$('#target_img').attr('src', src + '?' + new Date().getTime());


0 件のコメント:

2014年4月29日火曜日

PHP: 別のドメインからの Ajax アクセスを受け入れる

Web システムに Ajax でアクセスできる API を作成して、
外部から利用してもらうためには HTTP のアクセスコントロールが重要になる。

HTTP access control - Mozilla Developer Network
https://developer.mozilla.org/ja/docs/HTTP_access_control

デフォルトでは別のドメインから Ajax でアクセスすることができないため、
クロスドメインの通信を許可するヘッダーを PHP から出力する。
header('Access-Control-Allow-Origin: *');

これでどのドメインからでも通信が可能になる。
* 部分を変更して特定のドメインからのみ受け付けるという設定も可能。
0 件のコメント:

2014年4月28日月曜日

Mac OS X: SourceTree から新規リポジトリを作成する

ソースコードの管理には主に Git を使用しています。
Git クライアントとして Mac 版 SourceTree を使用しています。

SourceTree から GitHub などのホスティングサービス上へ、
リポジトリを作成してすぐに開発を始めることができます。

まず SourceTree を起動して、
「リポジトリを追加」ボタンをクリック。



ソースパス / URL の右側にある地球儀のアイコンをクリック。



「新規リポジトリを作成」ボタンをクリック。



ホスティングサービスを選択して、
リポジトリ名、その他設定を入力します。



リポジトリを作成ボタンを押すと、
ホスティングサービス上にリポジトリが作成されて、
リポジトリ一覧に表示されます。

あとは通常通り追加されたリポジトリをクローンして開発を始めましょう。
ホスティングサービスの設定は別途行う必要があります。


0 件のコメント:

2014年4月27日日曜日

NicEdit: 非表示状態での初期化は display:none ではなく visibility: hidden で

NicEdit で画面上の <textarea> をエディタに変換する際に、
画面上に非表示の状態で変換する場合、
width: 100% となっていても幅が広がらないケースがあります。

visibility: hidden; で非表示にしている場合は幅が広がった状態で初期化されますが、
display: none; で非表示にしている場合は幅が広がりません。
エディタは変換時の <textarea> の幅で固定表示となるため、
width: 100% とする場合は visibility: hidden; で隠しておく必要があります。

デモ
http://yokano.jp/demo/nic_edit_hidden/

コード
https://github.com/yokano/nic_edit_hidden
0 件のコメント:

2014年4月26日土曜日

NicEdit で幅が狭くなる対策

JavaScript の WYSIWYG エディタの NicEdit はサードパーティ製の日本語版も開発されており、MIT ライセンスで使用できるため便利です。

NicEdit ではスクリプトをロードした後に、ページ上の全ての <textarea> を WYSIWYG エディタに変換する関数を持っています。

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="path/nicEdit_ja/nicEdit.js"></script>
        <script>
            $(function() {
                nicEditors.allTextAreas();
            });
        </script>
        <style>
            textarea {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <textarea></textarea>
    </body>
</html>

この時、エディタの幅は元の <textarea> の幅と同じになるはずなのですが、
CSS で <textarea> の幅を 100% にしていても、
画面いっぱいに広がらず、狭い幅のエディタが生成されてしまう場合があります。
レンダリングの状態によって変わり、jQuery.ready() などを使っても、
解決できませんでした。

この場合は <textarea> の要素に style 属性として、
直接幅を定義することで回避できます。
nicEdit が <textarea> の style 属性を直接セットするため、
CSS で定義した幅が優先されないケースが有るため、
今のところは <textarea> の style 属性を直接指定しておくのが良いかと思います。 
<textarea style="width:100%"></textarea>

NicEdit については日本語版のページよりも公式の Wiki が詳しいです。

0 件のコメント:

2014年4月25日金曜日

PHP: PHP5.4 以前と PHP5.5 以降のパスワードハッシュ作成

PHP 5.5 以降では password_hash() によってパスワードハッシュを作成することができます。
PHP 5.4 以前では crypt() によってハッシュを作成することになります。

PHP.net では password_hash() の使用が推奨されているようです。

安全なパスワードハッシュ - PHP
http://www.php.net/manual/ja/faq.passwords.php

開発環境の PHP が 5.5 で password_hash() を使用していたら、
本番環境の PHP が 5.4 で動かない！！
ということになったので要注意です。
0 件のコメント:

PHP: PDOでMySQLから取得した文字列が ASCII で文字化けする対処法

さくらのレンタルサーバ上で PHP の PDO で MySQL へアクセスした際に、
取得できたデータの文字コードが ASCII になってしまう問題がありました。

色々と対処法を悩んだんですが、
PDO オブジェクトを作成した際に SET NAMES を実行する方法に落ち着きました。

PHP PDO: charset, set names? - Stack Overflow
http://stackoverflow.com/questions/4361459/php-pdo-charset-set-names

PDO を作成する関数（get_pdo()など）を作成しておいて、
そこで UTF-8 を指定するようにして必ず UTF-8 で取得できるようにしました。
0 件のコメント:
登録: 投稿 (Atom)