スタッフブログ

  • 最新配信
  • RSS

openpearの旅 第8回:HTML_CSS_Mobile

 : 技術全般 2009/5/9 2:55

Blogger's Avatar

正直毎回openpearの話を書くのはちょっと飽きてきました…

さて,今回はyudoufu氏が開発したHTML_CSS_Mobile ( http://openpear.org/package/HTML_CSS_Mobile ) について紹介します.
日本での主要な携帯電話キャリアは,docomo, au, softbankの3種類になり,携帯サイトを作る場合,
これら主要3キャリアでの表示が求められる事が多いです.
携帯電話のWeb周辺の仕様はキャリアによって異なり,docomoではCookieが使えなかったり,
絵文字の仕様がバラバラで,表示先のキャリアを判別して変換したりと,面倒な事がたくさんあるのですが,
その面倒な事の1つに,「docomoの場合,style属性でしかCSSを反映させられない」という問題があります.
auや,softbankの為に外部CSSや埋め込みCSSを書いても,docomoでは表示できない為,
処理をふりわける必要があります.
しかし,毎回特定のタグが出るたびにstyle属性を追加していくのは非常に面倒です.

HTML_CSS_Mobileを使うと,外部CSSを解析して,style属性にしてHTMLのタグに追加してくれます.
これを利用する事で,外部CSSを書いて,docomoの時だけ
HTML_CSS_Mobileでstyle属性に変換する事で3キャリアの対応ができるようになります,

使い方もほとんど説明する必要はありません.インストールしたら,最終出力部分を$htmlとして持っておいて,
以下のように記述するだけです.
なお,このパッケージを利用するには,PEARのHTML_CSS, HTML_Commonが必要になるので注意してください.

require_once 'HTML/CSS/Mobile.php';
$html = HTML_CSS_Mobile::getInstance()->apply($html);

$htmlの中にあるHTMLをパースして,外部CSSの指定部分を抽出.そこからCSSファイルを読み込んで,
style属性にしてくれます.すごいですね.

最近モバイルサイト構築の勉強をした時に使ってみたのですが,
HTML_CSS_MobileなしでCSSを使うのはかなり無謀だなと思いました.
モバイル関係の方は絶対チェックしておく事をオススメします.

MAX_FILE_SIZE はinput フィールド file の前に置く必要があります

naoto : 技術全般 2009/5/7 19:50

Blogger's Avatar

こんにちわ。なおとです。

イベントビューアで見ることができるシステムのログから、毎日の始まりと終わりの時間を抽出するスクリプトを書きました。 タイムカードの打ち忘れの時にちょと使うためです。

スタート→すべてのプログラム→管理ツールー→イベント ビューア
操作→一覧のエクスポート
テキスト(タブ区切り)

で書き出したファイルをフォームから食わせて、結果をCSVファイルでダウンロードできるようにしました。

こういうコードは基本は書き捨てなのですが、弊社のリポジトリにある「雑多なコードを入れるところ」にも置きました。 今日はそのコードをここに晒しておしまいにしようかとも思ったのですが、面白みに欠けるので別の話題にします。

例1 ファイルアップロード用のフォーム

その作業の中でPHPマニュアルを参照していたのですが、気になる点があったので書いておきます。

POST メソッドによるアップロード
/[cvs]/phpdoc-ja/features/file-upload.xml

$ diff -urN file-upload.xml.1.38 file-upload.xml
--- file-upload.xml.1.38 2009-05-07 18:57:10.000000000 +0900
+++ file-upload.xml 2009-05-07 19:06:47.000000000 +0900
@@ -53,7 +53,7 @@
 <![CDATA[
 <!-- データのエンコード方式である enctype は、必ず以下のようにしなければなりません -->
 <form enctype="multipart/form-data" action="__URL__" method="POST">
-    <!-- MAX_FILE_SIZE はファイルフィールド用に必須です -->
+    <!-- MAX_FILE_SIZE はinput フィールド file の前に置く必要があります -->
     <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
     <!-- input 要素の名前が $_FILES 配列での名前となります -->
     このファイルをアップロード: <input name="userfile" type="file" />

初めはまったく気に留めていなかったのですが、MAX_FILE_SIZEなんて普段書かずに済むことの方が多いのに、必須って何だろうと思い、まわりのひとと雑談をする中でここは誤訳なのではないかということになって、それで気づいた次第です。

DD_roundiesで角丸表現

 : 技術全般 2009/5/1 9:08

Blogger's Avatar

satoです。


(CSSの)borderを角丸にしたい、というのはデザインでよくある要望の1つだと思います。
以前はNifty Corners Cubeを使用していたのですが、条件によって一部ブラウザで表示がおかしくなることがあり、代替ライブラリを探していました。

いくつか調べたところ、DD_roundiesというライブラリを見つけました。

使い方は簡単で、このファイルを読み込んだ後に、
DD_roundies.addRule([セレクタ], [角丸量], true);
というのを書いていくだけです。
最後のtrueをfalseにしたり、省略したりするとIE専用になるようです。どういう違いがあるのかわかりませんが、一部の紹介記事では省略された状態になっているので、必ずtrueを付けるようにしてください。
セレクタは、普通のスタイルシートの指定と同様の感じで書けます。
.class
div.class
div#id a
角丸量は、




指定数順序例の解説
1全部10px全ての角を10px丸める
2(左上 右下)、(右上 左下)10px 5px左上と右下を10px、右上と左下を5px丸める
3(左上)、(右上 左下)、(右下)10px 5px 3px左上を10px、右上と左下を5px、右下を3px丸める
4左上、右上、右下、左下10px 5px 3px 1px左上を10px、右上を5px、右下を3px、左下を1px丸める

となっております。
2〜3指定がわかりづらいので、全部同じか全部個別指定がいいと思います。

例えば、この記事限定でこのファイルを読み込むようにしてありますので、アドレスバーに、
j&#x61;v&#x61;script:DD_roundies.addRule('#rd3blogHeader', '20px', true);
と入力すると、この記事の上部の「スタッフブログ - DD_roundiesで角丸表現」という箇所の角が丸くなっているのがわかると思います。

MITライセンスを採用しているため、再配布も容易です。テーマやモジュール制作を行っている方も使用してみてはいかがでしょうか。

jQueryを使っている場合であれば、jQueryを使用した角丸ライブラリがいくつかあるようなので、そちらを使ってみるといいかもしれません。いろいろ試してみてください。

Internet Explorer 8 を入れたくない場合に

 : 技術全般 2009/4/30 23:50

Blogger's Avatar

大型連休を目前に控え、何をやろうか悩み中のgusagiです

既にあちこちのブログで取り上げられていますが、少し前にマイクロソフトが自動更新の日程について「未定」としていたはずのInternet Explorer 8(IE8)日本語版が、昨日あたりに自動更新の対象としてあがってきたようです。
個人的には、新しいIEのインターフェースやら速度やら試してみたいと思いますが、流石に業務で使っているPCにいきなりインストールというのは出来ません
同じように「今はまだ入れられない」という方も多いと思います。

IEについては、こちらのページに書かれていますが、ブロッカーツールキットを使用することで、自動更新によるインストールをブロックすることが出来るようです。
マシンを起動したまま連休を迎え、連休後に出勤したらIE8になっていたなんてこともあり得るので、IE8にしたくない人は上記のブロッカーツールキットを入れてみては如何でしょうか?

オンラインで英語学習

Ryuji : XOOPS » 総合的な情報 2009/4/28 18:38

Blogger's Avatar

当社 mik がすでにスタッフブログに書いていますが、XOOPS Cube Legacy 2.2開発にかかわっている gigamasterさんとお会いする機会がありました。

このせっかくの機会なのに英語がほとんどわからない私としては、時々聞き取れる単語(といっても"fckeditor"とか、"block"とかがメインですが)から非常に興味深い話をしてる感じはつかめるものの、話の詳細がわからず、伝えたいことがあっても話せずという状態で、かなりもどかしい感じでした。

こういう滅多にないチャンスが訪れたときに、英語がわからないために話に参加できないというのは、非常にもったいないので、何度も挫折している英語勉強を再開することにしました。

さて、それで現在やっているのは smart.fm(旧iKnow)です。

smart.fm

短時間で少しずつ、レベルにあわせて学習できますので「全然わかんない!」って挫折する可能性が低いです。

私は何度か中断してますが、それでもまたやってみようと思える学習サイトです。無料で利用できますので、気楽にやってみてはどうでしょうか?

さて、もうひとつもうちょっと英語力ついたら試してみようかなぁと思っているオンライン英語学習が、skype による英会話レッスンです。

オンライン英会話のe-com英語ネット

こちらは有料のサービスですが、skypeを利用して自宅で英会話レッスンが可能なサービスです。

オンラインでレッスンできるので、英会話教室へ通う手間もないですし、深夜や早朝のレッスンも可能なようです。

というわけで、オンラインで利用可能な英語学習サービス2点のご紹介でした。

XOOPS Cube2.2開発者 gigamasterさん来日♪

mik : XOOPS » 総合的な情報 2009/4/28 9:45

Blogger's Avatar

メルマガにも書く予定なのですが、XOOPS Cube2.2のメイン開発者(でいいんでしょうか?)として名高いgigamasterさんが来日し、お会いしてきました。

会う前のイメージは

・秋葉原の辺りにいっぱいいるオタク系外人
・太ってるもしくはやせてる
・怖い人かも?

というものでした。gigamasterさんの名前はよく聞いてはいたもののどのような方かは全く知りませんでした。

しかし、、、弊社社長は「日本一かっこいいxoopser」を自称しているのですが、そんなこと言ってるのが全く申し訳ないほどのイケメン!です。

しかも、私のつたない英語も一生懸命聞いてくれてわかりやすい英語で話してくれたので一応会話は少々成立しました。

XOOPSとJoomlaやDrupalとの比較。いかにして顧客にXOOPS Cubeの優位性を認めてもらうかなどということについてホワイトボードを利用して熱く語ってくれました。
























また、お酒の席ではお住まいのスイスの兵役や日本に対してスイスの方々がどんなことを思ってるかなどということも語ってくれてリアルならではの面白い話が聞けました。

おみやげのチョコレートです。

Dropbox+WARPで同期した環境作成

 : 技術全般 2009/4/24 11:31

Blogger's Avatar

こんにちは、argonです。

今回はDropbox+WARPで同期した環境作成という内容を書いてみようと思います。

Dropboxについては自分もつい最近使いはじめたのですが、大変便利ですね。
もっと前から使っていれば良かったと後悔したくらいです
さて、作業としては特に難しい事があるというわけではないのですが、順をおって書いていきますと…

1)Dropbox導入
既に使っている人はOKです。まだの人は下記URLのDropboxのサイトからソフトをダウンロードして、Dropboxのアカウントを作成します。

http://www.getdropbox.com/

2)WARPをダウンロード
以下のサイトからWARPをダウンロードしてきます。
そしてダウンロードしてきたファイルを解凍します。
WARPはApacheやMySQLが動作しますので、既存のパッケージから自分で好きなCMSをインストールすることもできますので、様々なCMSをいれてみたりするのも良いと思います。

http://warp.ws/index.php?action=pages_view_main&page_id=16

3)Dropboxにアップロード
My DropboxにWARPのフォルダをコピーして、ファイルのアップロードします。
さて、このアップロードなのですがWARPはファイル数の数が多いので結構時間がかかります。
(逆にファイルサイズの大きいものでもDropboxの仕組み上、誰かがまったく同じファイルをDropbox上においていればアップロードに時間はほとんどかかりません。例・有名なソフトの体験版など)

これでアップロードが終了すれば完了です。
環境を作るのは結構手間もかかるので、1つ環境を作り、それが同期できれば、なかなか便利だと思います。
今回のWARPはWindows用のソフトなので当然Macでは動作させることはできません、ですが、もしかしたらAdobe AIRで作られたソフトはWindowsでもMacでも使用できるかもしれません。
ちょっと夢が広がりますね

openpearの旅 第7回:Net_Pocketbell

 : 技術全般 2009/4/23 19:45

Blogger's Avatar

今日はNet_Pocketbell ( http://openpear.org/package/Net_Pocketbell ) というライブラリを紹介します.
このライブラリは,ポケベル打ちの数値とカナを変換するライブラリです.

ポケベル打ちとは,ポケットベルにおいて,プッシュ信号によって数桁の数字を送れる機能を利用して,数字の組み合わせを文字と判定して表示を行う方法で,現代では,携帯電話の文字入力方式の1つに利用され,「2タッチ方式」などと呼ばれています.
基本的には,1タッチ目が母音で,「1,2,3,4,5」が「あ,か,さ,た,な」になり,2タッチ目が子音になっています.
「11」で「あ」,「12」で「い」という感じです.
通常の携帯電話の入力方式は,一文字確定するのに最大で5回押す事になりますが,2タッチの場合は常に2回なので,従来の方式よりも高速に入力する事ができるといわれています.

http://ja.wikipedia.org/wiki/%E3%83%9D%E3%82%B1%E3%83%99%E3%83%AB%E6%89%93%E3%81%A1
http://ja.wikipedia.org/wiki/%E7%84%A1%E7%B7%9A%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97

女子高生が公衆電話のボタンを超高速で連打していたのはわずか10年前の事ですから,技術の進歩の速度には驚かされます.

ともかく,今回のライブラリを使うと,

228513618512440322443354

という数値を打った時に,

キヨウハヨイテンキテスネ

に変換してくれます.
使い方は簡単で,

$pb = new Pocketbell('NTT');
echo $pb->num2kana('228513618512440322443354') . "\n";

とすれば,引数に指定した数字の内容が.

$pb = new Pocketbell('NTT');
echo $pb->kana2num('キョウハヨイテンキデスネ');

とすれば,数値が表示されます.

ただし,2タッチで表示できない(組み合わせにない)文字は表示できません.上の「キョウハヨイテンキデスネ」という文章は,「ョ」と「デ」が存在しないため,この2つの文字を抜いた,「22136185124403223354」が表示されます.

また,「あ」から「ん」までは割とどの機種でも同じなのですが,それ以外の文字については,機種依存が激しく,機種によって入力方法はまちまちです.

例えば,私が使っているSH906iにある「2タッチ入力方式」で0から9までの数値を表示する場合,

00969798999006070809

とします.しかし,これをNet_PocketbellのNTT方式に適用すると,

0↑↓[時計][電話]9/‐& 

となってしまい,意図した通りに表示されません.

今の携帯の2タッチ入力の再現に利用するのは難しいですが,昔なつかしのポケベル文化に触れるという意味ではなかなかおもしろいライブラリです.

健康診断受けます

naoto : その他 2009/4/22 19:19

Blogger's Avatar

こんにちわ。なおとです。

今月末に、会社の健康診断を受けることになりました。 もちろん社内でではなく、都内某所に行ってそこで受ける手筈になっています。

実は私は通常の健康診断は好きなほうです。 身長体重、視力に聴力、血液検査とか。

数年前のある時から健康に気をつけるようになったのですが、ここのところ不摂生や不規則がちな生活が気になっています。 健康診断の日だけに限らず、まずはできるところから改善です。 これは仕事も含めて開発のノウハウにも通じるところがあるのではないでしょうか。

Dropbox時代の日記ツール

 : ツール 2009/4/21 17:33

Blogger's Avatar

satoです。
前回に引き続きDropboxの活用法の話です。

以前から日記(ブログとかではなく、完全に非公開の日記)を書こうと思っていたのですが、手書きは厳しいのでPCで手軽に書けるツールを探していました。
一時はブログツールで日記を書いていたのですが、ブラウザで文字を書くのはどうも軽快ではないので面倒になってしまいました。「保存」を押さないと保存されないのも面倒です。
しかしオフラインのツールはいつデータが消えるか不安でした。
Dropboxを併用するようにすれば、オフラインのツールでもそのままバックアップが可能なので遠慮無く利用することができます。

必要な点としては
・単体ソフト(Webは重いので不可)
・検索ができる
・Dropboxとの相性がいい(パスが変わっても問題なく動作する)
・自動保存
・タイトルの記入が必須ではない(思考が止まるため)
といった感じです。

いろいろ探してみたところ、

Osciroi
を使うことにしました。
編集画面が別なので起動直後に編集できないとかという点は若干気になりますが、見た目が綺麗なのと、一通り機能が揃っているという点が気に入りました。
ただし保存パスは初期状態では絶対パスになるので、一度保存してからiniを直接書き換える必要があります。

次点は
しばやん日記
一通りの機能も揃っていて、パスも解決できていて便利なのですが、見た目が若干堅い感じというのと、ホイールスクロールが効かないという点で断念しました。

iDailyDiary Free
編集部分が高機能なのですが、全体的に重いのと、パスが解決できないので断念しました。

PentaDiary
パス関係を満たしていて、すぐ書けて便利なのですが、リサイズの方法がわからないのと、検索ができないという点で断念しました。

そら日記
一通り機能が揃っていて便利なのですが、リンクフォルダ(日記にファイルを添付するような機能?)だけが絶対パスで指定する必要があり、環境によってパスが変わると動作しなくなるので断念しました。

ゆらめきのひび
家計簿とか予定とかも書けて、かつシンプルでいいのですが、パスが変わると動作しませんでした。

ちなみに、Webで書きたいという方は、はてなダイアリーのプライベートモードが手軽でいいと思います。

Dropboxがあれば、急なデータ紛失にも対応できるので、皆さんも好みのツールで日記を書いてみてください。

スタッフブログ最新
カテゴリ一覧

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階

Copyright(c) 2012 RYUS.All Rights Reserved.