2013年12月31日火曜日

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/

2013年12月30日月曜日

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

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

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

2013年12月29日日曜日

Apache で Basic 認証

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

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

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

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

-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

2013年12月28日土曜日

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

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

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

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

2013年12月27日金曜日

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

例えば、現在時刻から1時間の時刻を求めるには以下のようにします。
$date = new DateTime();
$interval = new DateInterval('PT1H');
$date->add($interval); // $date に 1 時間が加算される


2013年12月26日木曜日

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

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/

2013年12月25日水曜日

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

2013年12月24日火曜日

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]

2013年12月23日月曜日

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

2013年12月22日日曜日

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

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

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

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

2013年12月20日金曜日

好きな値段でゲームが買える!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

2013年12月19日木曜日

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

2013年12月18日水曜日

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

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

$ service httpd start

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

2013年12月17日火曜日

vi で長い行の折り返し

:set wrap
で折り返す

:set nowrap
で折り返さない

2013年12月16日月曜日

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

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

2013年12月15日日曜日

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

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

2013年12月14日土曜日

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

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

chkconfig httpd on

2013年12月13日金曜日

vi で行番号を表示

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

 

2013年12月12日木曜日

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

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

2013年12月11日水曜日

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

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

  • C
  • C++
  • D
  • Haskell
  • Lua
  • OCaml
  • PHP
  • Perl
  • Plain Text
  • Python
  • Ruby
  • Scheme
  • Tcl
を実行できます。

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



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

2013年12月10日火曜日

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

スクリプト作成
$ vi script.sh

!#/bin/sh
処理内容
処理内容
処理内容
スクリプト実行
sh script.sh
定期的に実行する場合は cron を使う
$ crontab -e

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

2013年12月9日月曜日

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});

2013年12月8日日曜日

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

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


2013年12月7日土曜日

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

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

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

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

2013年12月6日金曜日

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

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

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

2013年12月5日木曜日

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: サポートされる文字エンコーディング

2013年12月4日水曜日

2013年12月3日火曜日

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
一旦桁を上げてから小数点以下を切り捨て、桁を戻すことで実現しています。

2013年12月2日月曜日

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

正規表現の test() メソッドを使うとチェックできます。
var str1 = 'ABCDE';
var str2 = 'CDEFG';
/BCD/.test(str1); // true
/BCD/.test(str2); // false

2013年12月1日日曜日

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

scrollTop() 関数で取得できます。
ブラウザによって document や body は動作が変わるので window にバインドするのがよさそうです。
$(window).on('scroll', function() {
    console.log($(this).scrollTop()); // ピクセル数
});

2013年11月30日土曜日

Mac でスキャナを使う

Mac でスキャナから画像を取り込むためには標準でインストールされている「イメージキャプチャ」を使います。(ユーティリティの中に入っています)


スキャナを接続した状態でイメージキャプチャを使うと jpg や pdf など拡張子を指定して読み込むことができます。

2013年11月29日金曜日

mysql.sock がない場合

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'

MySQL をインストール、ローカルでログインしようとしたら上のエラーが出た。
あれ?と思って調べてみたら mysqld を起動していなかったという落ちだった。
起動しないと生成されないらしい。

また、OS によっては /tmp/mysql.sock においてあることもある。

2013年11月28日木曜日

好きな値段で Android ゲームが買える Humble Mobile Bundle 3 が公開

Hamdle Mobile Bundle 3
https://www.humblebundle.com

以前ご紹介した Hamble Mobile Bundle の新しいバージョンが出ています。
今回は以下のゲームがセットになっています。

EPOCH


rymdkapsel


SpellTower


Swordigo


Ridiculous Fishing: A Tale of Redemption


Kingdom Rush


Hundreds (一定額課金したら)


Spider: The Secret of Bryce Manor


Desert Bus




2013年11月27日水曜日

Skype がポート 80 を使っている場合あり

普段使用している PC でローカル Web サーバを立てると、ポート80が使われているため通信できない場合があります。
この場合は Skype などのソフトの設定でポート 80 を使用しないようにすると動くようになります。

2013年11月26日火曜日

Firefox では background-position-x(y) が動かない

スプライトアニメーションなどでよく使用する background-position-x, background-position-y ですが Firefox では動きません。
Firefox では background-position: Xpx Ypx; という表記にする必要があるため注意が必要です。

2013年11月25日月曜日

特定のイベントで form を送信する

通常は <form> 要素の中に <input type="submit"> を設置し、クリックされたらフォームを送信するという流れになっていると思います。
submit ボタンを押す以外ののイベントから送信する場合は、送信ボタンを隠して JavaScript からクリックイベントを発行するという方法があります。
下の例ではボタンクリックですが、その他のイベントでも同じように処理できます。

2013年11月24日日曜日

各ブラウザごとのキャッシュの消し方

Safari 7.0

Safari > 環境設定 > プライバシー > Cookie とその他の Web サイトのデータ
「詳細」ボタンを押すと1件ずつ削除できる


または、⌘ + alt + I でデバッグツールを表示
リソースタブ内の Cookie からクッキーを選択して削除



Google Chrome 31.0

メニュー > 設定 > プライバシー > コンテンツの設定 > Cookie > すべての Cookie とサイトデータ...
クッキー一覧が表示されるので削除したいものを選択して削除


または alt + ⌘ + I でデバッグツールを開く
Resources タブから Coolkies を開き1件ずつ選択して削除



Firefox 25.0

Firefox > 環境設定 > プライバシー > 履歴 > Cookie を個別に削除 をクリック
一覧が表示されるので削除する


IE 11

設定 > インターネットオプション > 全般 > 履歴の閲覧 > 削除


「クッキーと Web サイトデータ」にチェックを入れて「削除」をクリック



2013年11月23日土曜日

ニンテンドー3DSのペアレンタルコントロールは外せるのか?

子供がニンテンドー3DSのペアレンタルコントロール機能を外してインターネットに接続し、犯罪に巻き込まれる事件がありましたが、そもそもペアレンタルコントロール機能は簡単に外せるのでしょうか?

ペアレンタルコントロールについてはこちらを参照
お子様がプレイされる際にお伝えしたいこと「保護者による使用制限機能」について | Nintendo

無料で付いているフィルタリングソフト
i-フィルター for ニンテンドー3DS | i-フィルター




ペアレンタルコントロールを試してみたところ、4桁の暗証番号を入力すれば制限は外せるようです。また、入力回数に制限がないようなので最大で 0000 ~ 9999 まで1万回ひたすら入力すれば外せますね。どうしても・・・という場合は定期的に暗証番号を変更すると良いかと思います。

2013年11月22日金曜日

phpMyAdmin でセルをダブルクリックして編集する

MySQL の操作を GUI 上で行えるソフト phpMyAdmin ではセルをダブルクリックすることですぐに内容を編集できます。
今までこの操作を知らずに毎回編集ボタンを押していたので驚きました。

編集したいセルをダブルクリック

その場で編集できる
ちなみにバージョン 4.0.9 で確認しています。

CRON の実行結果をメールさせない

CRON で定期的にプログラムを実行するとデフォルトで実行結果をメールで送信します。
毎回メールで送ってほしくない場合は結果を null デバイスに入力する方法があります。
* * * * * /usr/bin/php /var/www/html/task.php > dev/null

ただしこの方法だとログも消えてしまうので、
通常は以下のようにログを残すべきです。
* * * * * /usr/bin/php /var/www/html/task.php >> /var/www/html/task_log

2013年11月21日木曜日

code break; のリポジトリを BitBucket へインポートする

無料で Git リポジトリを無制限に利用できるサービスとして code break; を紹介しましたが、同じようなサービスに Bitbucket があります。

Git クライアントソフト SourceTree の開発元 Atlassian によるサービスです。
今後は Bitbucket を使うことにしたので code break; 上のリポジトリを BitBucket へインポートしました。

まず、code break; のリポジトリのURLを確認します。
リポジトリページの右上に表示されているのでコピーしておきます。


Bitbucket にログインしてメニューのリポジトリ -> リポジトリのインポート を選択します。


リポジトリの情報を入力します。
  • ソースは Git
  • URL は先ほどコピーしたもの
  • 「認証が必要です」にチェックを入れる
  • ユーザ名、パスワードは code break; のもの
  • 新規リポジトリ名を入力(元のリポジトリと同じでOK)



以上を入力して「リポジトリのインポート」ボタンを押せば、
Bitbucketの中にリポジトリが移動できます。
もちろん過去の編集履歴なども含めて扱うことができます。

2013年11月20日水曜日

PHP の global で関数の外のグローバル変数を読み込む

PHP で関数内から関数外の変数を参照するときには global で宣言する。
自動的に外部の変数は参照してくれないので注意。

<?php
$val = 'Hello World!';

function say() {
    global $val; // 関数外の変数$valを使用することを宣言
    echo $val;
}

say();

実行結果
http://codepad.org/YqknpQ8g

2013年11月19日火曜日

MySQL の TEXT 型は DEFAULT を無視する

MySQL でデータ型を TEXT に設定した場合、 初期値を設定できません。
CREATE TABLE test (name TEXT DEFAULT "y.okano");
VARCHAR では DEFAULT が効くのでつい設定しそうになりますが、 このように指定しようとしても初期値は設定されず NULL となります。

2013年11月18日月曜日

JavaScript で半角と全角の数値だけを受け入れるフォーム

jQuery と正規表現を使って半角・全角のみを受け入れるフォームです。

サンプルコード

2013年11月17日日曜日

Mac の Safari で iOS の Safari のデバッグ

Mac OS X の Safari で iOS の Safari をデバッグすることができます。

iOSデバイスの設定で Safari の Web インスペクタを ON にします。



iOSデバイスとMac OS X デバイスをケーブルで接続します。



iOS の Safari でデバッグしたいページを開きます。
Mac OS X の Safari を起動して「開発」からデバッグしたいデバイスを選択します。
iPad で表示しているページのデバッグを Mac 側で行えます。



2013年11月16日土曜日

MacでphpMyAdminにログインできない場合の対処

phpMyAdmin の 4.0.9 を Mac にインストールしたのですが、「#2002 MySQL サーバにログインできません 」というエラーが発生してログインが出来ませんでした。

環境
- Mac OS 10.9
- PHP 5.4

php.ini で指定されている mysql.sock のパスが違うことが原因でした。
私の環境の場合は mysql.sock は /tmp/mysql.sock にありました。

php.ini で mysql.sock を参照している箇所を /var/mysql/mysql.sock から /tmp/mysql.sock に変更したところ、phpMyAdmin にログインできるようになりました。

2013年11月15日金曜日

JavaScriptで節分の日付を求める

JavaScript で節分の計算をするサンプルです。
節分は必ず2月3日というわけではなく、年によって2日や4日へ変化します。
Wikipedia に予測値が載っているのでそちらを参考に計算できます。
http://ja.wikipedia.org/wiki/節分
var year = 1989; // 調べる年
var SETSUBUN = [
    {
        range: [1915, 1987],
        remainder: [3, 3, 3, 3]
    },
    {
        range: [1952, 1987],
        remainder: [4, 3, 3, 3]
    },
    {
        range: [1985, 2024],
        remainder: [3, 3, 3, 3]
    },
    {
        range: [2022, 2057],
        remainder: [3, 2, 3, 3]
    },
    {
        range: [2055, 2090],
        remainder: [3, 2, 2, 3]
    },
    {
        range: [2088, 2100],
        remainder: [3, 2, 2, 2]
    },
    {
        range: [2101, Number.POSITIVE_INFINITY],
        remainder: [4, 3, 3, 3]
    }
];

var setsubun;
for(var i = 0; i < SETSUBUN.length; i++) {
    if(SETSUBUN[i].range[0] <= year && year <= SETSUBUN[i].range[1]) {
        setsubun = SETSUBUN[i].remainder[year % 4];
        break;
    }
}

console.log(year + '年の節分は2月' + setsubun + '日です');  // 1989年の節分は2月3日です

2013年11月14日木曜日

Bitbucket でソースコードのみをダウンロードする

Gitホスティングサービスの Bitbucket ではリポジトリのページからソース自体を DL することができます。
リポジトリのページを表示して画面右側の「ダウンロード」リンクで落とすことができます。




SourceTree などの Git クライアントでアーカイブを取っても同じ結果が得られます。
SourceTree ではリポジトリを開いた状態でメニューの リポジトリ > アーカイブ でソースのみを取得できます。

2013年11月13日水曜日

Mac のローカルサーバで PHP を動かす

Mac には最初から PHP がインストールされていますが、有効化はされていません。
そのため Apache の設定ファイルを書き換える必要があります。

詳細は PHP の公式サイトの情報をご覧ください。
http://www.php.net/manual/ja/install.macosx.bundled.php

基本的には

/private/etc/apache2/httpd.conf

内の

#LoadModule php5_module libexec/apache2/libphp5.so

部分のコメントを外して Apache を再起動すれば OK です。

2013年11月12日火曜日

MacOS X と iOS でブックを同期する

環境
- MacOS X 10.9
- iOS7

iOS デバイスと Mac をUBSケーブルで接続する
デバイスの世代によってケーブルが変わります



iTunes を開く
右上のデバイスのボタンをクリック


「ブック」タブを選択


「ブックを同期」をチェック



これで Mac OS X と iOS で電子書籍が同期できます。

2013年11月11日月曜日

IE11 の検索エンジン変更方法

IE11 ではデフォルトではURLフォームでの検索が bing によって行われます。
これを google に変更してみます。

URLフォームの右側にある虫眼鏡アイコンの右の三角形をクリック



追加をクリック


ギャラリーから追加したい検索エンジンを選択
今回は google を選択


InternetExplorer に追加する。
更に規定の検索プロバイダに設定するにチェックを入れると、
常に選択した検索エンジンで検索ができるようになります。



2013年11月10日日曜日

ブラウザが File API を実装しているか調べる

File API が実装されているかどうか window.File を調べればわかります
if(!window.File) {
    alert('File API 未対応です');
}

2013年11月9日土曜日

IE11のユーザエージェント

IE11 ではユーザエージェントに "MSIE" を含まいないので注意が必要です。

IE7
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

IE8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

IE9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

IE10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

IE11
Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BRI/2; rv:11.0) like Gecko

IE7 ~ 10 では MSIE *** の部分で判定、IE11 では Trident/7.0 または rev:11.0 で判定するのが良いと思います。IE7 では Trident を含まない点に注意です。

なお IE11 のユーザエージェントは Windows のバージョンによっても変化します。
詳しくは以下の公式情報を御覧ください。
ユーザーエージェント文字列の変更 - InternetExplorer

2013年11月8日金曜日

IE11 正式版が公開

IE11 がダウンロード出来るようになったので Windows 7 に入れてみました。
インタフェースは特に変化がないですが、動作が高速になっているらしいです。


3D表示のサンプルコンテンツなども準備されていました。



F12のデバッグツールが変わっていました。
スマホ利用を想定した項目なども追加されています。


2013年11月7日木曜日

JavaScript の getYear() は非推奨

JavaScript の Date オブジェクトの getYear() は非推奨です。
代わりに getFullYear() を使います。
var date = new Date();
date.getYear(); // 113
date.getFullYear(); // 2013

getYear() は1999 年からの差分を返し、
getFullYear() は西暦4桁を返します。

2013年11月6日水曜日

code break; 使ってみた

無料でプライベートGitリポジトリが無制限に使用できる code break; を使ってみました。
(code break; の中の GitBreak というサービスのようです)
GitHub では有料にしないとプライベートリポジトリが作れないので、重宝しています。



もともとプライベートなものはローカルにGitリポジトリを作っていたのですが、
別のPCからアクセスしたいこともあり code break; を使うことにしました。
クライアントは無料の SourceTree を使っています。
無料でプライベートリポジトリが作り放題なので便利です。



code break;
https://codebreak.com

SourceTree
http://www.sourcetreeapp.com

2013年11月5日火曜日

さくらレンタルサーバでBASIC認証をかける

さくらのレンタルサーバではGUIでBASIC認証の設定が可能です。
自分で .htaccess と .htpasswd を作成せずに設定できます。

ファイルマネージャを開き、メニューから「表示アドレスへの操作」->「アクセス設定」を選択します。



パスワード制限を使用するにチェックを入れて、
右下の編集ボタンをクリック。


ユーザ名とパスワードを追加します。
OKを押して保存すればBASIC認証がかかります。

2013年11月4日月曜日

Mac OS Maverics のアクティビティモニタ

アクティビティモニタが Lion の表示と変わっています。

グラフがアナログっぽくなった

メモリの円グラフが無くなってメモリプレッシャーというグラフに

エネルギーという項目が追加された

2013年11月3日日曜日

Xcode で日本語が表示されない時の対処

Xcode でたまに日本語フォントがエディタ上に表示されないことがあります。
コメントの中身が表示されないのでちょっと不便です。

該当する行を編集するとすぐに文字が表示されるので、
⌘ + A でテキストを全選択して ⌘ + ] でインデントをいれ、
⌘ + [ ですぐにインデントを戻しています。

これですべての行の日本語が表示されます。
根本的な解決にはなっていませんが、とりあえずこれで間に合わせています。

2013年11月2日土曜日

Gimp でキャンバスサイズを変更する

Gimp 2.8 でキャンバスを変更するには

Image -> Canvas Size

このとき Resize layers を All layers にして、
レイヤーの大きさも変更します。
キャンバスだけ大きくしてもレイヤーの大きさが変わらないと編集できません。


2013年11月1日金曜日

Xcode 5 で Go 言語のソースに色を付ける

Xcode が 5 系にアップデートされ、Go 言語の設定が消えてしまいました。
Xcode 4 系と同じ方法で再び設定出来ました。

設定方法は過去の記事のままで大丈夫でした。
http://yokano-jp.blogspot.jp/2013/02/xcode4xgo.html

2013年10月31日木曜日

Google のロゴがハロウィン仕様に

今日の Google のロゴはハロウィンの魔女でした。
調合ゲームみたいな感じです。



魔女のスプライトはこんなかんじ。
https://www.google.co.jp//logos/2013/halloween13/sprite-reading.jpeg
https://www.google.co.jp/logos/2013/halloween13/sprite-stirring.jpeg

りんごが入ってるから大丈夫?
魔女の調合とか占いの知識・技術を総称してウィッチクラフトっていうらしいです。
http://ja.wikipedia.org/wiki/ウィッチクラフト

2013年10月30日水曜日

無料学習アプリ ShareWiz(シェアーウィズ)

現在 iOSネイティブアプリ、ブラウザWebアプリとして提供されている無料の学習アプリ ShareWiz のご紹介です。開発は株式会社シェアウィズです。



Webブラウザ版
http://share-wis.com

iOS 版
https://itunes.apple.com/jp/app/wu-liao-xue-xi-sharewis-sheau/id585517208?mt=8


知識を地図のように並べたインタフェースが特徴で、プログラミングや英語、スポーツや経営など幅広い分野のコースが揃っています。




コースをクリックすると動画やテキストで学習を開始できます。
学習した後は理解度チェックに進み、クイズ形式で復習できます。



学習が完了すると地図上で学習した単位に緑色のマークが付きます。
地図上を踏破していく感覚で学習をすすめることができます。