CSS で文字の輪郭線を付ける

WebKit 系のブラウザでは文字の輪郭線を付けることができる。
デモ：http://yokano.jp/demo/stroke/

h1 {
    font-family: sans-serif;
    -webkit-text-stroke: 1px blue;
    color: white;
}

参考
Adding Stroke to Web Text - CSS-TRICKS
http://css-tricks.com/adding-stroke-to-web-text/

PHP をコマンドラインで実行

Webブラウザからアクセスせずに直接 php コマンドでも実行できる。

$ php /var/www/html/test.php

cron やシェルスクリプトで実行する場合には php を直接実行する。
cron に書く場合は /usr/bin/php などのように絶対パスを書く。

Apache で Basic 認証

以下の手順で実現できる。

1. htpasswd コマンドでパスワードファイルを生成
2. httpd.conf で対象のディレクトリとパスワードファイルを指定する

まずパスワードファイルを生成する。
BASIC 認証でログインするときのユーザ名とパスワードを指定する。
ユーザ名を yokano にする場合は、

# htpasswd -c /etc/httpd/.htpasswd yokano
[パスワードを２回入力]

-c オプション（Create）を指定するとパスワードファイルを新規作成する。
既に作成済みのパスワードにユーザを追加したい場合は -c は付けない。
（-c をつけると以前のパスワード情報が消えるので注意。）

パスワードファイルは Apache のドキュメントルート内などの
公開された場所に設置しないように注意。
パスワードファイルがダウンロードされてしまう可能性があるため。

パスワードファイルが生成できたら、
Apache の設定ファイルで Basic 認証をかけるディレクトリと
パスワードファイルを指定する。

例えばドキュメントルート直下の secret ディレクトリに Basic 認証を掛ける場合は、
以下のように設定すればよい。

# vi /etc/httpd/conf/httpd.conf
ファイルの末尾に以下を追加
<Directory "/var/www/html/secret">
    AuthType Basic
    AuthUserFile /etc/httpd/.htpasswd
    AuthName "Please input id and password."
    Require user yokano
</Directory>

参考

Apacheでユーザー認証を行なうには（Basic認証編） - @IT
http://www.atmarkit.co.jp/flinux/rensai/linuxtips/698apachebasic.html

htpasswd - Manage user files for basic authentication - Apache HTTP Server
http://httpd.apache.org/docs/2.2/programs/htpasswd.html

W3C の HTML バリデーションチェック

W3C が提供しているマークアップバリデーションツールでは、
HTML や XHTML などのマークアップの文法の誤りや
リンク切れなどをチェックすることができます。

Markup Validation Service | W3C
http://validator.w3.org

通らなくても動くのですが、
気にする人は気にするのでたまにチェックしてみると良いかと思います。

PHP で時刻を加算する

PHP では時刻を扱うために DateTime クラスを使用できます。

DateTime class | PHP
http://www.php.net/manual/en/class.datetime.php

引数なしで生成すると現在時刻になります。

$date = new DateTime();

ただし php.ini でタイムゾーンの設定をしなければ使用できないので注意して下さい。

DateTime のインスタンスには時間間隔を表す DateInterval クラスのインスタンスを加算できます。

DateInterval class | PHP
http://www.php.net/manual/en/class.dateinterval.php

例えば、現在時刻から１時間の時刻を求めるには以下のようにします。

$date = new DateTime();
$interval = new DateInterval('PT1H');
$date->add($interval); // $date に 1 時間が加算される

ラジオボタンのデザインを変える

HTML のラジオボタンのデザインを画像に変える方法として、
<label> を使う方法があります。

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


まず、ラジオボタンを作ります。

<label><input name="default" type="radio" checked>: A</label>
<br>
<label><input name="default" type="radio">: B</label>

<label> 要素に適当なクラスを設定します。
CSS で設定したクラスの下に入っている <input> 要素を非表示にします。

<label class="radio"><input type="radio" checked>: A</label>
<br>
<label class="radio"><input type="radio">: B</label>

ラジオボタンの画像を作成します。

<label> 要素の背景画像として設定します。
チェックされている <input> 要素を持っている<label>に "on"
チェックされていない <input> 要素を持っている<label>に"off"
というクラスを設定しています。
CSS でそれぞれのクラスの background-image を設定することで
ON / OFF を表現します。
jQuery で設定します。

// JavaScript
$('.radio').each(function() {
    if($(this).find('input').is(':checked')) {
        $(this).removeClass('off').addClass('on');
    } else {
        $(this).removeClass('on').addClass('off');
    }
});

/* CSS */
.radio {
    width: 17px;
    height: 17px;
    padding-left: 20px; /* 画像を表示するために左側を開ける */
    background-repeat: no-repeat;
}

.radio.on {
    background-image: url("img/on.png");
}

.radio.off {
    background-image: url("img/off.png");
}

最後にクリックされた時にラジオボタンを切り替える処理を JS で追加します。

$('.radio input').on('change', function() {
    $('.radio').removeClass('on').addClass('off');

    if($(this).is(':checked') {
        $(this).parent().addClass('on').removeClass('off');
    }
});

以上で完了です。


参考
jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要） | Stronghold
http://zxcvbnmnbvcxz.com/form-improvement-2-7/

RubyGem を CentOS 6 へインストール

Ruby のライブラリをインストールできるパッケージ管理システムである RubyGems を Cent OS 6 へインストールする方法です。RubyGems を使うと Ruby 製のライブラリやソフトを簡単にインストールできるようになります。

詳細情報はこちら
http://rubygems.org

まずソースを落としてきます。

$ wget http://production.cf.rubygems.org/rubygems/rubygems-2.1.11.tgz

展開します。

$ tar -xzf rubygems-2.1.11.tgz

README.rb に詳しいインストール方法が書かれています。
ルビーで書かれたインストールスクリプトが入っているので実行します。

$ cd rubygems-2.1.11
$ ruby setup.rb

これでインストール完了です。

$ gem -v
2.1.11

CentOS 6 に Ruby 2.0 をインストール

現在の Ruby の最新版 2.0 を CentOS 6 に入れてみます。

ソースからインストールします。

詳細情報はこちら

http://www.ruby-lang.org/ja/

まずはソースコードを落とします。

$ wget http://cache.ruby-lang.org/pub/ruby/2.0/ruby-2.0.0-p353.tar.gz

展開します。

$ tar -xzf ruby-2.0.0-p353.tar.gz

展開されたディレクトリ内にある README.ja にインストール方法が詳しく書かれています。

configure, make, make install でインストールできます。

$ cd ruby-2.0.0-p353
$ sudo configure
$ sudo make
$ sudo make install

これでインストール完了です。

$ ruby -v
ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-linux]

Cent OS 6 に yum を使って MySQL 5.6 をインストール

2013年12月23日の時点で MySQL Server Community Edition の最新バージョンは 5.6 です。5.7 は評価版が公開されている状態です。

MySQL では公式に yum のリポジトリを公開しており、Linux から最新版をダウンロードできるようになっています。

2.5.1. Installing MySQL on Linux Using the MySQL Yum Repository
http://dev.mysql.com/doc/refman/5.6/en/linux-installation-yum-repo.html

Cent OS 6 へ最新版の MySQL をインストールするには以下のように操作します。

---

まず、MySQL のサイトから rpm をダウンロードします。
http://dev.mysql.com/downloads/repo/

Cent OS 6 の場合は Red Hat Enterprise Linux 6 を選んで下さい。
ダウンロードできたらサーバ上にアップロードしておきます。

rpm パッケージをインストールします。

# rpm -i mysql-community-release-el6-5.noarch.rpm

既に MySQL の古いバージョンがインストールされている場合はアップデートします。

# yum update mysql-server

新規にインストールする場合は以下のように実行します。

# yum install mysql-server

これで最新版の MySQL 5.6 がインストールされます。

# mysql --version
mysql  Ver 14.14 Distrib 5.6.15, for Linux (x86_64) using  EditLine wrapper

jQuery UI でエフェクトやアニメーションをつける

jQuery UI を使えば様々なアニメーションを Web ブラウザ上で実行できます。
CSS 3 のアニメーションとは異なり古いブラウザでも動作するのが特徴です。

こちらにデモがあるのでご覧ください。
jQuery UI Effect

JavaScript から直接 HTML 要素のスタイルを変更する形でアニメーションが実現されています。
アニメーションのスピードや方向、完了時の処理などが指定できます。
Web ページ上にちょっとしたアニメーションを追加したいときに便利です。

好きな値段でゲームが買える！Humble Bundle 8 が登場！！

注文時に自分でゲームに値段をつけ、開発者と様々な団体への寄付への割合を設定することができる Humble Bundle の 8 が登場しました。

Humble Bundle 8
https://www.humblebundle.com

今回のゲームは WIndows, Mac, Linux, Android で動作するゲームが集まっています。

Little Inferno
 

Gemini Rue


AaaaaAAaaaAAAaaAAAAaAAAAA!!!...


Jack Lumber


Hero Academy（一定以上の支払いでアンロック）


Anomaly 2

html 要素の lang 属性で言語を指定する

HTML5 の <html> 要素の lang 属性でページの言語を設定できる。
ここで設定した言語は、音声読上げソフトが読み上げ時に
どの言語で読み上げるのかを判断する材料になるため、
基本的には設定したほうが良い。

<!DOCTYPE html>
<html lang="ja">
...
...
</html>

HTML5 仕様書
http://www.w3.org/TR/2013/CR-html5-20130806/semantics.html#the-html-element

service コマンドでサービスの管理をする

Linux でサービスの起動や停止、状態の確認に service コマンドが使える。
例えば Web サーバの Apache を起動する場合は以下のようにする。

$ service httpd start

起動なら start
停止なら stop
再起動なら restart
起動状態の確認は status
を指定する。

vi で長い行の折り返し

:set wrap
で折り返す

:set nowrap
で折り返さない

線形グラデーションのマルチブラウザ対応

CSS を以下のようにすると IE7 ~ 11、Firefox、Safari、Chrome で同じように動作する線形グラデーションが作れます。

Linux で特定のポートを開ける

WebサーバやFTPサーバなどをインストールした後、ポートを開けてクライアントと通信できるようにするには iptables コマンドを使用する。
Webサーバ用に 80 ポートを開くときは以下のようにする。

$ iptables -I INPUT -p tcp --dport 80 -j ACCEPT

chkconfig コマンドで OS 起動時のサービスを指定する

指定したサービスを OS 起動時に実行するために chkcoonfig コマンドを使用できる。
例えばサーバが起動した時にWebサーバを自動的に起動するなら

chkconfig httpd on

vi で行番号を表示

ESC キーを押してコマンドモードへ移る。 :set number または :set nu コマンドを実行すると行番号が表示される。 :set nonumber または :set noun コマンドで行番号を非表示に戻す。 

 

MySQL の root パスワードをリセットする

MySQL をインストールした直後や、MySQL の root パスワードを忘れた時は root 権限で以下のコマンドで再設定できます。

$ mysqladmin -u root passwd

codepad でコードと実行結果を共有する

codepad はコードを入力したコードを実行して結果を共有するための URL を出力してくれる Web サービスです。
現時点で

• C
• C++
• D
• Haskell
• Lua
• OCaml
• PHP
• Perl
• Plain Text
• Python
• Ruby
• Scheme
• Tcl

を実行できます。

入力フォームにコードを入力したら submit をクリックして実行します。

実行結果が表示されるので画面上部の URL を共有したい人に送りましょう。

Linux でシェルスクリプトを書く

スクリプト作成

$ vi script.sh

!#/bin/sh
処理内容
処理内容
処理内容

スクリプト実行

sh script.sh

定期的に実行する場合は cron を使う

$ crontab -e

*/30 * * * * /bin/sh /(スクリプトファイルの絶対パス)/script.sh > (ログファイルのパス)

jQuery で要素の大きさを測る

HTML 要素の大きさを測るときには width(), height() を使う。
padding も含めた大きさを測るときには innerWidth(), innerHeight() を使う。
border も含めた大きさを図りたいときは outherWidth(), outherHeight() を使う。
更に margin も含めた大きさを図りたいときは margin オプションを true にすればよい。

var width = $('element').width();
var height = $('element').height();
var innerWidth = $('element').innerWidth();
var innerHeight = $('element').innerHeight();
var outerWidth = $('element').outerWidth();
var outerHeight = $('element').outerHeight();
var outerWidth2 = $('element').outerWidth({margin: true});
var outerHeight2 = $('element').outerHeight({margin: true});

Mac のプレビューで画像を PDF に変換する

Mac の標準ソフト「プレビュー」は画像を PDF として保存できます。
画像を開いたらメニューから「ファイル -> PDF として書き出す...」を選択すれば、
画像を PDF 化することができます。

jQuery UI のダイアログが画面に一瞬表示されるのを防ぐ

jQuery UI ではマルチブラウザに対応したダイアログを簡単に作成できます。
http://jqueryui.com/dialog/

ダイアログの初期化は JavaScript から行わなければならないので、HTML要素を読み終わった後に初期化すると、autoOpen を false に設定していても一瞬だけ画面にダイアログの中身が表示されてしまいます。

この場合は CSS でダイアログに設定している <div> の display を none にすれば表示されなくなります。ダイアログを $('element').dialog('open') で開く場合には勝手に中身を display: block などに変更してくれるので、最初に display: none だけ設定しておけば大丈夫です。

jQueryで取得したCSSの数値だけを抜き出す

CSS の設定値として px などを指定している場合は、以下のように後ろ２文字を削除して数値に変換できます。

parseInt($('element').css('left').slice(0, -2), 10);

PHP の mb_string で使用できるエンコーディング一覧

PHP の mb_string で指定する文字コード一覧です。

• UCS-4*
• UCS-4BE
• UCS-4LE*
• UCS-2
• UCS-2BE
• UCS-2LE
• UTF-32*
• UTF-32BE*
• UTF-32LE*
• UTF-16*
• UTF-16BE*
• UTF-16LE*
• UTF-7
• UTF7-IMAP
• UTF-8*
• ASCII*
• EUC-JP*
• SJIS*
• eucJP-win*
• SJIS-win*
• ISO-2022-JP
• ISO-2022-JP-MS
• CP932
• CP51932
• SJIS-mac** (エイリアス: MacJapanese)
• SJIS-Mobile#DOCOMO** (エイリアス: SJIS-DOCOMO)
• SJIS-Mobile#KDDI** (エイリアス: SJIS-KDDI)
• SJIS-Mobile#SOFTBANK** (エイリアス: SJIS-SOFTBANK)
• UTF-8-Mobile#DOCOMO** (エイリアス: UTF-8-DOCOMO)
• UTF-8-Mobile#KDDI-A**
• UTF-8-Mobile#KDDI-B** (エイリアス: UTF-8-KDDI)
• UTF-8-Mobile#SOFTBANK** (エイリアス: UTF-8-SOFTBANK)
• ISO-2022-JP-MOBILE#KDDI** (エイリアス: ISO-2022-JP-KDDI)
• JIS
• JIS-ms
• CP50220
• CP50220raw
• CP50221
• CP50222
• ISO-8859-1*
• ISO-8859-2*
• ISO-8859-3*
• ISO-8859-4*
• ISO-8859-5*
• ISO-8859-6*
• ISO-8859-7*
• ISO-8859-8*
• ISO-8859-9*
• ISO-8859-10*
• ISO-8859-13*
• ISO-8859-14*
• ISO-8859-15*
• byte2be
• byte2le
• byte4be
• byte4le
• BASE64
• HTML-ENTITIES
• 7bit
• 8bit
• EUC-CN*
• CP936
• GB18030**
• HZ
• EUC-TW*
• CP950
• BIG-5*
• EUC-KR*
• UHC (CP949)
• ISO-2022-KR
• Windows-1251 (CP1251)
• Windows-1252 (CP1252)
• CP866 (IBM866)
• KOI8-R*

詳細はこちらから

PHP: サポートされる文字エンコーディング

http://il1.php.net/manual/ja/mbstring.supported-encodings.php

iOS, Android でドラクエ 1 が期間限定で無料配信中

まるごと１本無料配信されています。

JavaScript で小数点以下で切り捨て

JavaScript で小数点以下第 N 位で切り捨てを行う関数の例です。

// 小数点以下 n 位までの数値にする
var parsePoint = function(number, n) {
    return Math.floor(number * Math.pow(10, n)) / Math.pow(10, n);
}

console.log(parsePoint(123.456, 2)); // 123.45

一旦桁を上げてから小数点以下を切り捨て、桁を戻すことで実現しています。

JavaScript で文字列が特定のフォーマットになっているかチェックする

正規表現の test() メソッドを使うとチェックできます。

var str1 = 'ABCDE';
var str2 = 'CDEFG';
/BCD/.test(str1); // true
/BCD/.test(str2); // false

jQuery でスクロール位置を取得する

scrollTop() 関数で取得できます。
ブラウザによって document や body は動作が変わるので window にバインドするのがよさそうです。

$(window).on('scroll', function() {
    console.log($(this).scrollTop()); // ピクセル数
});