作成者別アーカイブ: 鮎

jQueryでテーブル組を変換する［2カラムのテーブルをばらして、スマホ向けにしてみる］

投稿日: 2012年7月5日 作成者: 鮎

　PC版のサイトでよく使う基本的なテーブルスタイルとして

<table>
<tr><th>件名</th><td>お知らせ</td></tr>
<tr><th>送信者名</th><td>hoge@piyo.tld</td></tr>
<tr><th>メッセージ本文</th><td>こんにちわ、これはテスト用のメッセージです。<br>ワイド画面の多いPCなら良いけど、幅が狭いスマホでは左見出しが長いと見にくくなりますね。</td></tr>
…
</table>

件名 お知らせ
送信者名 hoge@piyo.tld
メッセージ本文 こんにちわ、これはテスト用のメッセージです。
ワイド画面の多いPCなら良いけど、幅が狭いスマホでは左見出しが長いと見にくくなりますね。

　みたいなテーブルがあると思うけど、スマホとかで表示すると（Width600px）

　みたいな感じになって、TDが狭くなっちゃって見にくくなるんで、THをHタグにして、その下にTDを入れるようにJavaScriptで変換してみる（テーブルをはき出すスクリプトを変えれば良いんだけど、PCとスマホでテンプレを変えないと言う変わったケースに対応）

jQueryを使って

$(document).ready(function(){
    if($(window).width()<=720){
        $(‘table’).each(function(){
            var breaked = "";
            $(‘tr’, this).each(function(){
                breaked += "<h3>"+$("th", this).html()+"</h3><p>"+$("td", this).html()+"</p>";
            });
            $(this).before(breaked);
            $(this).remove();
        });
    }
});
</script>

みたいなJSを書いてみた。　UserAgentで識別せずに、開いたときのウィンドウのサイズが720ピクセル以下の場合にH3/Pタグに書き換えるようにしてみた。
　すると・・・

　こんな感じに仕上がって、縦長、横短のスマホ画面向けな感じにイフェクトできた。　セレクタにtableタグを使っているけど、thとtdが1個ずつの2カラムテーブル専用に書いてあるから、2カラムテーブルを明示するクラスなどをつけた方がいいかな。

テストページ　（ウィンドウサイズを変えてリロードしてみると、720ピクセル以下とそれより大きい場合で見え方が変わる。　$(window).resizeを使えば、ウィンドウをリサイズしたときにうにょうにょ変わるということもできるだろう）

(336)

カテゴリー: ｊQuery | タグ: , | コメントをどうぞ

お名前.com VPSで最短WordPress設定する – さくら等CentOS系VPS全般対応

投稿日: 2012年7月3日 作成者: 鮎

　お名前.com VPSのサーバを契約してWordpressを動かすまでの最短ルートをメモっておく。
　ポイントは、お名前.com VPSの基本状態では、iptablesによりポート22（SSH）しか許可されていないので、これを設定し直すこと。

;必要なパッケージを導入
yum install mysql-server
yum install mysql
yum install php
yum install php-mysql
yum install httpd
yum install vim
yum install wget
yum install unzip

;Apache設定をする（仮想ドメイン等を使わなければとりあえずそのままで動く）
vim /etc/httpd/conf/httpd.conf

;iptablesを設定する。
iptables -I INPUT -p tcp –dport http -j ACCEPT
service iptables save

;サービスのスタート設定
chkconfig httpd on
chkconfig mysqld on
/etc/init.d/httpd start
/etc/init.d/mysqld start

;mysqlでデータベースの作成とパスワード設定をする
mysql
>SET PASSWORD FOR ‘root’@’localhost’ = PASSWORD(‘パスワード’);
>CREATE DATABASE wordpress;

;Wordpressファイルの展開と所有権設定
cd /var/www/
wget http://ja.wordpress.org/wordpress-3.4-ja.zip
unzip wordpress-3.4-ja.zip
rmdir html
mv wordpress html
chown apache:apache html -R

;Wordpressのセットアップ画面で設定を実施。
;DBユーザroot 設定したパスワードとデータベースで構築（本来はrootではなくユーザ追加した方が安全性が高い）
;wp-config.phpの内容をコピって貼り付けてCTRL+D・・・
cat >wp-config.php

　以上でWordpressが使用可能になったはず。
　さくらVPS等、ほかのCentOS系のVPSレンタルサーバでも、同じ方法で導入できる。

　DB直いじりすることがあるならphpMyAdmin位は入れておくのもいいかも。　最後のphpMyAdminは定型で狙われやすいので適当にキーフレーズ的なパスにするのも良い＞mv phpMyAdmin-3.5.1-all-languages getwildbytmn みたいにして、http://hoge.tld/getwildbytmn にphpMyAdminを置く。

cd html
wget http://sourceforge.net/projects/phpmyadmin/files/phpMyAdmin/3.5.1/phpMyAdmin-3.5.1-all-languages.tar.gz/download
tar xzf phpMyAdmin-3.5.1-all-languages.tar.gz
mv phpMyAdmin-3.5.1-all-languages phpMyAdmin

(442)

カテゴリー: サーバ設定 | コメントをどうぞ

VPSで変換した動画を疑似ストリーミングする場合の話

投稿日: 2012年6月27日 作成者: 鮎

　以前の記事で、ffmpegを使ってお名前.com VPSやさくらVPS上でTS録画をMP4変換する記事を書いた。
　普段、Android標準ブラウザやChromeで見ていると普通に疑似ストリーミングが出来ていたんだけど、仕事関係でIEやFirefoxで見たら、QuickTimeプラグインが立ち上がって、ファイルダウンロード完了しないと再生できないことに気づいた。
　対応方法は、MP4BoxでMP4コンテナを作り直すこと。
　MP4BoxはWindowsでメジャーだけど、GPACの中にもあるので、LinuxでもGPACをビルドして、変換後のMP4を再構築するようにしてやればIEやFirefoxでも疑似ストリーミング出来るようになる。
　もっとも、個人利用でPCはChrome、スマホはAndroidだから、わざわざ変換しないでも良いんだけど、何となくメモっておく。

(352)

カテゴリー: サーバ設定 | コメントをどうぞ

お名前.com VPSと物理サーバ(Proliant ML350/Xeon E5506)のベンチを比較してみた

投稿日: 2012年6月21日 作成者: 鮎

　普通の物理サーバと比較してみる為にベンチを取ってみた。
　ML350(Xeon E5506x1, 12GB RAM, SAS 10000rpm HDD)

========================================================================
BYTE UNIX Benchmarks (Version 5.1.3)

System: ml350.local: GNU/Linux
OS: GNU/Linux — 2.6.18-194.17.1.el5 — #1 SMP Wed Sep 29 12:50:31 EDT 2010
Machine: x86_64 (x86_64)
Language: en_US.utf8 (charmap=”UTF-8″, collate=”UTF-8″)
CPU 0: Intel(R) Xeon(R) CPU E5506 @ 2.13GHz (4264.7 bogomips)
Hyper-Threading, x86-64, MMX, Physical Address Ext, SYSENTER/SYSEXIT, SYSCALL/SYSRET, Intel virtualization
CPU 1: Intel(R) Xeon(R) CPU E5506 @ 2.13GHz (4264.8 bogomips)
Hyper-Threading, x86-64, MMX, Physical Address Ext, SYSENTER/SYSEXIT, SYSCALL/SYSRET, Intel virtualization
CPU 2: Intel(R) Xeon(R) CPU E5506 @ 2.13GHz (4264.5 bogomips)
Hyper-Threading, x86-64, MMX, Physical Address Ext, SYSENTER/SYSEXIT, SYSCALL/SYSRET, Intel virtualization
CPU 3: Intel(R) Xeon(R) CPU E5506 @ 2.13GHz (4264.6 bogomips)
Hyper-Threading, x86-64, MMX, Physical Address Ext, SYSENTER/SYSEXIT, SYSCALL/SYSRET, Intel virtualization
12:09:58 up 3 days, 2:08, 4 users, load average: 1.20, 0.94, 0.68; runlevel

————————————————————————
Benchmark Run: 木 6月 21 2012 12:09:58 – 12:37:56
4 CPUs in system; running 1 parallel copy of tests

Dhrystone 2 using register variables 12209665.4 lps (10.0 s, 7 samples)
Double-Precision Whetstone 2426.1 MWIPS (9.8 s, 7 samples)
Execl Throughput 4007.8 lps (29.9 s, 2 samples)
File Copy 1024 bufsize 2000 maxblocks 486551.5 KBps (30.0 s, 2 samples)
File Copy 256 bufsize 500 maxblocks 142487.1 KBps (30.0 s, 2 samples)
File Copy 4096 bufsize 8000 maxblocks 1155556.7 KBps (30.0 s, 2 samples)
Pipe Throughput 928752.1 lps (10.0 s, 7 samples)
Pipe-based Context Switching 270718.7 lps (10.0 s, 7 samples)
Process Creation 11906.2 lps (30.0 s, 2 samples)
Shell Scripts (1 concurrent) 6160.0 lpm (60.0 s, 2 samples)
Shell Scripts (8 concurrent) 2213.6 lpm (60.0 s, 2 samples)
System Call Overhead 751282.6 lps (10.0 s, 7 samples)

System Benchmarks Index Values BASELINE RESULT INDEX
Dhrystone 2 using register variables 116700.0 12209665.4 1046.2
Double-Precision Whetstone 55.0 2426.1 441.1
Execl Throughput 43.0 4007.8 932.0
File Copy 1024 bufsize 2000 maxblocks 3960.0 486551.5 1228.7
File Copy 256 bufsize 500 maxblocks 1655.0 142487.1 860.9
File Copy 4096 bufsize 8000 maxblocks 5800.0 1155556.7 1992.3
Pipe Throughput 12440.0 928752.1 746.6
Pipe-based Context Switching 4000.0 270718.7 676.8
Process Creation 126.0 11906.2 944.9
Shell Scripts (1 concurrent) 42.4 6160.0 1452.8
Shell Scripts (8 concurrent) 6.0 2213.6 3689.4
System Call Overhead 15000.0 751282.6 500.9
========
System Benchmarks Index Score 1012.6

————————————————————————
Benchmark Run: 木 6月 21 2012 12:37:56 – 13:06:09
4 CPUs in system; running 4 parallel copies of tests

Dhrystone 2 using register variables 47698281.2 lps (10.0 s, 7 samples)
Double-Precision Whetstone 9706.0 MWIPS (9.9 s, 7 samples)
Execl Throughput 15605.2 lps (29.8 s, 2 samples)
File Copy 1024 bufsize 2000 maxblocks 350054.4 KBps (30.0 s, 2 samples)
File Copy 256 bufsize 500 maxblocks 105229.8 KBps (30.0 s, 2 samples)
File Copy 4096 bufsize 8000 maxblocks 1028767.1 KBps (30.0 s, 2 samples)
Pipe Throughput 3623665.5 lps (10.0 s, 7 samples)
Pipe-based Context Switching 1243005.6 lps (10.0 s, 7 samples)
Process Creation 47556.5 lps (30.0 s, 2 samples)
Shell Scripts (1 concurrent) 22027.5 lpm (60.0 s, 2 samples)
Shell Scripts (8 concurrent) 3062.2 lpm (60.0 s, 2 samples)
System Call Overhead 2917520.5 lps (10.0 s, 7 samples)

System Benchmarks Index Values BASELINE RESULT INDEX
Dhrystone 2 using register variables 116700.0 47698281.2 4087.3
Double-Precision Whetstone 55.0 9706.0 1764.7
Execl Throughput 43.0 15605.2 3629.1
File Copy 1024 bufsize 2000 maxblocks 3960.0 350054.4 884.0
File Copy 256 bufsize 500 maxblocks 1655.0 105229.8 635.8
File Copy 4096 bufsize 8000 maxblocks 5800.0 1028767.1 1773.7
Pipe Throughput 12440.0 3623665.5 2912.9
Pipe-based Context Switching 4000.0 1243005.6 3107.5
Process Creation 126.0 47556.5 3774.3
Shell Scripts (1 concurrent) 42.4 22027.5 5195.2
Shell Scripts (8 concurrent) 6.0 3062.2 5103.6
System Call Overhead 15000.0 2917520.5 1945.0
========
System Benchmarks Index Score 2446.5

お名前.com VPS 2GBの３パラレルとＭＬ３５０の４パラレルのベンチの比較

　比の数字が大きいほどお名前のインデックスが高い。
　あれ・・・専用サーバよりもＣＰＵ周りの結果が良い。　そして、いつも思っているとおり、ディスク周りが遅くて、物理サーバの半分以下になっている。
　ディスク周りが改善されればパフォーマンス的な不満はほぼ無くなりそうだ。

(370)

カテゴリー: レビュー | タグ: , , | コメントをどうぞ

個人用電子メール証明書を無料で入手する

投稿日: 2012年6月19日 作成者: 鮎

　お名前.com VPSでもさくらのVPSでもサーバ証明書としてSSLボックス RapidSSLを入れて活用しているわけだけど、そのほかにメール通信も保護したい。
　電子証明書発行機関としてそこそこ有名なCOMODO社が個人利用向けに無料で電子メール用証明書を発行しているので、それを利用する。
　こちらのサイトから申請することが出来る。
　有効期間1年で電子メール署名・暗号化に使うことが出来る。　期限が来たら再発行を申請すれば新しい証明書を受け取ることが出来る。
　相手方と鍵を交換していないとメールの暗号化は出来ないが、署名は出来る。
　署名は、秘密鍵とメールの文書から生成してメールに添付し、相手側で公開鍵により確認することで、メールの文面が改ざんされていないことを証明する方法だ。
　暗号化したメールは相手が対応していない環境で受信できないが、署名は添付ファイルがついてくるだけなので、確認をしなければ添付ファイルを無視して本文を読むことが出来る。
　ネットワーク社会で少しでもメールの信頼性を向上させるため、出来るだけ導入しておきたいところだ。

　なお、証明書を入れたマシンが故障したりして、期間内に同じアドレスで新しい証明書を取得する場合には、既存証明書の無効化（Revoke;Revocation）が必要となる。
　COMODOのメール証明書無効化はこちらのページから行うことが出来る。

(333)

カテゴリー: LAMP[Linux, Apache, MySQL, PHP] | タグ: , | コメントをどうぞ

JavaScript/jQueryでファイルアップロードフォーム（インプットタグ）の拡張子を確認する

投稿日: 2012年6月14日 作成者: 鮎

<form name=’test’>
<input name="picture_file" type="file" >
</form>

　こんな感じのファイルアップロードフォーム（インプットタグ）を用意して、ファイルをアップロードさせる時に、タグの属性（accept）でファイル形式（拡張子）を設定できるけど、ブラウザ依存なんで、JavaScriptでアップロードファイル名の拡張子をチェックしたい時の開発パーツ（jQuery利用）

<form name=’test’>
<span id=’picture_file_span’><input name="picture_file" type="file" id="picture_file" onchange="extchk(‘picture_file_span’, $(this).val());"></span>
</form>

<script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’></script>
<script type="text/javascript">
    function extchk(id, fn){
        var fnsplt = fn.split(".");
        var ext = fnsplt[fnsplt.length – 1];
        switch(ext.toLowerCase()){
            case "jpg":
            case "jpeg":
            case "gif":
            case "png":
                return true;
                break; //未到達コード
            default:
                alert(‘未対応のファイル形式です’);
                jQuery(‘#’+id).html(jQuery(‘#’+id).html());
                return false;
                break; //未到達コード
        }
    }
</script>

　ファイルインプットタグの変更イベントで、設定したファイル名の拡張子がcaseに列挙されていればtrue,それ以外はアラートメッセージを出してファイルインプットをクリアした上でfalseを返している（IEではfile inputタグのvalをクリアすることは出来ないので、inputタグをspanで括って、中身を書き直すことでクリアしている）
　最初、jQueryでバインドしたが、htmlの差し替えでファイルインプットをクリアするとバインドが解除されるので、タグのonChangeに載せている。
　ファイルの中身を確認しているわけではないけど、簡単なチェックにはなるからWeb開発時に使い回せるだろう。

テストページ

ソースの整形にはHTML特殊文字をエンコードする on さくらVPSを利用している。

(2331)

カテゴリー: ｊQuery | コメントをどうぞ

Web開発のお供にBootstrap

投稿日: 2012年6月13日 作成者: 鮎

　ツイッターが提供しているBootstrapっていうライブラリ（？）がある。
　Web開発をする時、ページのスタイルを作るのが結構面倒なんだけど、Bootstrapには基本的な枠組みとかフォームパーツのアレンジとかがセットになって、CLASSを適当に設定してやると、通常のINPUT BUTTONを画像ボタンみたいに色づけしたりも出来る。
　基本的に、ちょっと大きめで、スマホページとかでタッチ操作に向いている感じだけど、追加のスタイルでサイズを調整すれば良い感じでWebサイトが作れる。
　難しいスタイルを作らずに、簡単にそこそこ見栄えのするページを作りたい時にオススメのアイテムだ。

(298)

カテゴリー: LAMP[Linux, Apache, MySQL, PHP] | コメントをどうぞ