渡辺友太のWebな日常

jQueryUIはリッチなUIを簡単に使えるライブラリです。
その名の通り、jQueryの上で動くので、jQueryを使ったことがある、
今使っているという方は簡単に扱えるはずです。

Selectableを初めて使ったのですが、つまづいたところ、
基本的な使い方など書き留めておきたいと思います。
(jQuery UI Selectbleのサンプルを元にしています)

リッチなUIにならない、表示が変、どうやらデザインが適用されてない。。。

jQueryUIをダウンロード・解凍するとjsとcssというフォルダがあると思います。
jsの中にjQueryとjQueryUIが入っているので、これらを読み込めば使えるわけです。
これだけでも、プログラムとしては動いてしまうのですが、肝心のデザイン関連(CSSやimage)は
cssフォルダに含まれています！自分だけかも知れませんがこれを忘れがち笑
/css/テーマ名/ の中にjQueryUIのCSSと 画像フォルダがありますので、
javascriptと同様適切なパス上において、linkタグで読み込んでおきましょう。

現在選択されているアイテムを取得する

サンプルのコード(View Sourceで表示されます)にもある通り、

この形で走査できます。イベントで受け取る場合は、

というような感じです。
イベントの場合は複数選択された場合、各々のアイテムについてそれぞれイベントが発生します。
また、もちろんunselectedの場合はui.unselectedで同様に要素にアクセスできます。

PHPでExcel2007ファイルを扱う際にはPHP Excelというライブラリがあります。
注意としてはPHP4では動作しないところ。
参考：PHPExcelを使ってPHPでExcelファイルを出力する

またExcelファイルをユーザから受け取るためにアップロード用のフォーム、
仕組みを用意しなければと思ってましたが、$_FILEで簡単に受け取れそうです。
参考：PHP Labo ファイルのアップロード

普段Excelで行っているルーチンワークを自動化するシステムを
構築したいと思ってます。本当ならMicrosoft系の開発環境で
やるべきだと思いますが、サードパーティーのライブラリなどを
利用しながら、PHPで実装するつもりです笑

いつになったらPHPから抜け出せるのかなぁ～、
今年はRuby,C#,Silverlightをやりたいのに汗
Javaも上級者レベルになりたい。。

そろそろヘッダー画像もカスタマイズしたいと思います。
写真とか用意する方が先な気もするけど、一応やり方を調査。

ちなみに、このブログで使用しているテーマはiNoveです。

調査したらstyle.cssの中にヘッダーに関するプロパティを発見。

大きさを変えずにheader.jpgを編集すれば簡単にカスタマイズできそう。
おそらくheightを大きくすれば高さも変更可能。
このheader.jpgは

wp-content/themes/inove/img/header.jpg

にあります。念のため編集するときはバックアップを取るのを忘れずに。

今運営サイト英単語検索Eilisをリニューアルしました！

去年の秋ごろから、そろそろ更新したいなぁと思っていたんですが、
とうとう2009年になってしまいました。

去年アクセス解析その他の分析でわかったことは、
プリントが便利という機能に需要がないということです。
逆に意外と多かったのが、熟語の検索や専門用語の検索です。

ということで、今回のリニューアルで辞書機能はけっこうパワーアップしてると
思います。以前は結果がでなかった英単語も多数でるようになっています。
なぜならiKnowのアイテムバンクから検索してるからです笑

ただ、全体的にアイディアが尽きてきたというのが正直なところ。
もっと、なんていうか、シンプル×強力なツールにしたいと思うのが本音です。
しかし、それがなかなか思いつかない。。。

次回リニューアルのテーマはリッチなUIに決めています。
今後はもっと操作性、パッと見の使いやすさなどを意識した
アプリケーションの開発をしていきたいです。

iKnow!ユーザ向けのFirefoxアドオンです。

Firefoxアドオン With iKnow!

使い方
１．インストール
２．右下のステータスバーに
　　　　　With iKnow!(Select and Click hre!)
　　とメッセージが出ていることを確認
３．ブラウザ上で、覚えたい単語、気になる単語、
　　リストに追加したい単語などを選択
４．With iKnow!(Select and Click hre!)　をクリック
５．新しいウィンドウでiKnow!のアイテムページが開かれます
　　左側のアイテムバンクの検索結果も参考にしてください。

ご意見・ご感想
　ブログのコメントに残していただけるとうれしいです。

今後の方針
　ちょっと機能が貧弱すぎるので、バージョンアップしていく予定です。

追記：１月７日　With iKnow!　もご覧ください。

iKnow!用のFirefoxアドオンを作ってみました。
以下のリンクからインストールしてみてください。

With iKnow!

まだ公開申請中なので、ダウンロードして保存したあと、
ファイルをFirefoxにドラッグ＆ドロップしてください。

Firefox用のアドオンを作るのははじめてなので、
いろいろ大変だった。XULの概念は結局いまいち理解できず、
ほとんどをJavascriptでカバーした気がする。
JQueryに感謝！

アドオンの内容はいたって単純。

ブラウザでテキストを選択し、右下のステータスバーに出ている

With iKnow!

をクリックすると、iKnow!のアイテムを検索し、リストへの追加、例文表示の
ページにジャンプします。まぁ、ほんとに単純なので、説明はいらないでしょう。
iKnow!ユーザの方、ぜひ感想お待ちしております。

今はまだ自分の技術が低すぎるので、もっと勉強したら、バージョンアップ版
作成しようとおもってます！

また、Firefoxアドオンを作ってみよう！という方、
自分自身ももっと便利なiKnow!アドオンの登場を、楽しみに待っています。
ど素人の書いたコードですが、開発の参考になれば、ご利用ください。
MITライセンスです。

<?php ?>という開始・終了タグの他に、
<? ?>というショートカットタグがあるのを知った。

<?= ～～～～?>

とすると～～～～の部分が出力される。
つまりechoと一緒。

ただXMLが混じった時は同じタグになっちゃって微妙なので、
<?php ?>にしてちゃんとechoを書いた方がいい気がする。

タグのかぶりといえば、CSSのclass,idのかぶりは困ったものだ。
あるテンプレートからCMS用のテンプレートを作っていると、
元のテンプレートのCSSによって、CMSの管理画面部分のデザインまで、
破壊されてしまうことがある。

ホームページってだいたいmenu,main,.sidebar,headerとか同じような
部分は絶対あるわけだし、こういうdivに対するclass,id名をみんなで
統一すると、もっとCMS間でもテンプレートの互換性がでると思うんだけどなぁ。

これまでいったい何回この問題に悩まされたことだろう。
文字化けに遭遇するたびに、その場しのぎの解決で逃れてきたけど、
最近もっとも気をつけてることは、

すべてUTF-8で書く。

ということ。XHTML、PHPのソースコード、php.iniの設定まで
すべてをUTF-8にする。一緒に開発する人にもそれを強要する。
WebAPIなどで取得したデータもすべてUTF-8に変換。
とにかく、なんでもかんでもUTF-8にする。

これでちょっと最近楽になってます。受け取ったもの、作るものが
すべてUTF-8だから、文字化けが発生した時は該当箇所を
UTF-8にすることに全力を尽くせば解決する。

また、php.iniの設定などPHP周りについては

PHPの文字化けを本気で解決する

が大変参考になります。

ブロック要素だと勝手に改行されちゃいます。
h1{
　display:inline;
}

で対処できる。これでインライン要素と同じように
改行されなくなる。

ある英語のドキュメントを読んでいたら、
コーディング規約の部分で繰り返しでてきた謎の単語。

camel-case

意味は見当も付かず、とりあえずcamelを英和辞典で
検索してみると

camel　ラクダ 

。。。意味不明。

いろいろ調べてみるとcamel-caseとは日本語で、
そのまんまキャメルケースと呼ばれるもので、
CamelCaseみたいに、複数の単語を先頭を 
大文字にしてつなげる書き方のこと！

普段プログラミングするときに、普通につかってたけど、
こんな名前だったことは初めて知った。
ちなみにcamelCaseをLowerCamelCase、
CamelCaseをUpperCamelCaseと言うとのこと。
Wikipedia　キャメルケース

なぜこの書き方をキャメルケースと呼ぶかというと
大文字が、らくだのこぶ、のように並ぶかららしいです。