http://pc.casey.jp コンピュータに関する記述とメモ Wed, 08 Feb 2012 01:21:06 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 http://pc.casey.jp/archives/153899470 http://pc.casey.jp/archives/153899470#comments Thu, 02 Feb 2012 15:03:04 +0000 admin http://pc.casey.jp/?p=153899470 サイトのデザインをどのようにするかというのは毎度の悩み。サイト構成は簡単にできる。くわえて負荷やサーバーを考慮したサイト構成も。しかし問題はデザインだ。 将来を見据えたデザイン ある研究によればデザインに拘るユーザは思いのほか少なく、コンテンツが優良であれば気にしないという統計も報告されている。また、サーバーの 負荷を減らすためにページ全体を読みこませるのではなく、非同期通信などと組み合わせて素早く更新させる技術などは、双方にメリットがある。 しかし、実際利用していて味気ないデザインとそこそこのデザインのものがあれば、後者を利用したくなるもの。エンジニア共通かもしれないが、デ ザインが苦手と言われるし、おそらく実際そうだ。デザインよりも機能を追求するからかもしれない。筆者もデザイン系のサイトは使いにくくて嫌いだ。また、 各システムがデフォルトで唯一持っているデザインを統一する能力がないなどが理由だ。 そもそも、デザインをどのように作成し、保管し、使うのかを改めて考え、調べてみた。そこで得られた回答の多くは、まずHTML で基本デザインを作成（システム非依存）し、それを各システムの要求するフォーマットとして流しこむことが良いとされるものが多かった。 デザインが固定される事による統一感は利用者にとっても信頼感やユーザビリティに優れる。また、場合によっては同一のCSS や.js の読み込みを行わせることで不要な通信を減らすこともできるかもしれない。 命名規則 結果的にはおそらく最も多く利用することになるだろうWordPress のオリジナルテーマに突入していくわけだが、すでにあるものを子テーマなどとして改造していくことも考えられる。 WordPress のテーマには特に決まったCSS 命名ルールは無いのだろうか。配布されている幾つかのCSS をK2E Editor をCSS 対応させるために読み込んだが、バラバラだったように思う。 ちなみに、命名するだけでリッチな表現にしてくれるというフレームワークらしいものは利用価値がありそうだ。（これはむしろCakePHP などに入れたい） Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime – かちびと. net また、幾つか調べていくとjQuery など初期状態で有効になっているものを上手く利用せよという意見や、子テーマを使えという意見もあり、とても参考になる。 WordPress のテーマ作成については以下が参考になる： WordPress自作テーマ作成（１） | Maruc Blog Project WordPressのオリジナルテーマを作ってみよう また、HTML にid などを指定するだけで基本デザインを作成しておき、以下に読み込ませることで簡単にCSS を作成する手助けをしてもらうこともできる： HTML文からスタイルシートのひな形を抽出する「PrimeCSS」 | Blog.IKUBON.com すでにあるデザインをベースに作成するなら色を抜き出してくれるツールが便利： CSSからカラーコードを抜き出して表示する「CSS Prism」｜Webpark Web サイト配色の抜き出しと配色作成 すでにあるHTML デザインをほとんどそのまま読み込めるらしいCMSもある： pc.casey.jp » [CMS] SOY [...]]]> http://pc.casey.jp/archives/153899470/feed 0 http://pc.casey.jp/archives/153894000 http://pc.casey.jp/archives/153894000#comments Sun, 06 Mar 2011 15:03:02 +0000 admin http://pc.casey.jp/?p=153894000 TweetMeme のように薄すぎない存在感と邪魔にならない謙虚さをもち、既存のすべての記事に目次を挿入したかったのだが多くのプラグインはそのような構造になっていなかった。 これから記事を書くとか、ページ数が少ないとか、内容が盛りだくさんの時だけ目次をつけるとか、そういった場合には良かったのだが既にこれだけの記事数があると自動挿入して欲しかった。（表示させないコードがあって、それが含まれている時だけキャンセルできるよプラグインもあったから、そのような構造にしてくれればもぅ…） おそらくWordPress のことだからコードを改変すれば可能だろうし、コードを改変しなくてもTweetMeme のCSS を真似るなどすれば可能なのだろうけれど…。 Search Regex で先頭に強制的にコードを挿入してしまうか、テンプレートファイルあたりを変更してプラグインの影響を受ける前にコードを挿入してしまうなど方法がないわけではないけれど。 しかし、探せば必ず答えてくれる豊富なプラグイン、すごいなー。 Table of Contents Generator インストールは ylsy_toc.php をプラグインディレクトリにアップロードして有効化 記事中に <!–TOC–> を入れると置換される 表示を変えたいときは /wp-content/plugins/ylsy_toc.php を編集する サイドバーなどテンプレートファイルに入れるときは <?php echo $post->post_toc; ?> 一番使われているようだが公式から検索＆インストールはできないようだ ダウンロード：Table of Contents Generator WordPress plugin | SYP 参考：hnタグから目次を作成するWordPressプラグイン「Table of Contents Generator」 参考：power source* » WP plugin[up]: 目次生成 – Table of Contents Generator をアップグレード 参考：Table [...]]]> http://pc.casey.jp/archives/153894000/feed 0 http://pc.casey.jp/archives/153889814 http://pc.casey.jp/archives/153889814#comments Thu, 21 Oct 2010 11:56:44 +0000 admin http://pc.casey.jp/?p=153889814 Head Cleanerを使うと体感速度の向上が得られるという。サーバー側での高速化はキャッシュプラグイン（WP-SuperCache等）で行うが、こちらはクライアント側。仕組みは参考文献で詳しく解説されているが、画面描画に必要な情報をブラウザに優先的に与え取り敢えずの表示を行ない、その後スクリプトなどを転送するのだという。また、重複する情報の統合などもやってくれるのだそう。 明確なベンチマークは行わなかったが、体感速度が向上したと感じられた。 「＜head＞ 内の JavaScript を、フッタ領域に移動」 と 「デバッグモード」 だけチェックを外してます。　「＜head＞ 内の JavaScript ・・・」 を外したのはチェックを入れると 飛び出すメニュー jQuery droppy が効かなくなるため。 （「Head Cleaner – サイトのヘッダとフッタを整形し最適化&高速化を行うプラグイン」より引用） ※その他にもHead Cleaner と WP Super Cache を同時に動作させる際の問題点 : dogmap.jpというページもあった。今のところHead CleanerとWP-SuperCacheをWordPress3.0.1で同時に使っているが特段問題ない。キャッシュ期限が切れた際などに問題に遭遇するのかもしれないが。 参考文献 サイトの表示が遅いので高速化方法を調べて実施 WordPress Plugins/JSeries » Head Cleaner (最適化＆高速化) Head Cleaner – サイトのヘッダとフッタを整形し最適化&高速化を行うプラグイン Head Cleaner と WP Super Cache を同時に動作させる際の問題点 : dogmap.jp ダウンロード head-cleaner.1.3.10.zipをダウンロード [...]]]> http://pc.casey.jp/archives/153889814/feed 0 http://pc.casey.jp/archives/2448 http://pc.casey.jp/archives/2448#comments Mon, 16 Aug 2010 02:49:53 +0000 admin http://pc.casey.jp/?p=2448 以前紹介したフローティングポップアップ： pc.casey.jp » jQuery を使ったフローティングポップアップ : http://pc.casey.jp/archives/2441 どうしてか、自力で閉じようとしてかなりハマる。配布元に有益な情報がきっちり書かれていたのに…。ということで、閉じたり開いたりする方法のメモです。 ※IFRAMEの場合 開く <a href="（開きたいアドレス）" onclick="new $pop( this.href, { type: 'iframe', title: 'test', width: 900, height: 400, varName: 'hoge' } ); return false;">iframeTest</a> この時、varName: ‘hoge’ のように名前をつけておくと、とても幸せになれる。 閉じる 開いたところ（親）から <a href="javascript:;" onclick="test(); return false;">CloseTest</a> function test(){ hoge.close(); } 開かれたところ（子）から parent['hoge'].close(); この記事を読んだ人は、こんな記事にも興味をもっていますつぶやくボタンの設置 – JavascriptjQuery を使ったフローティングポップアップ]]> http://pc.casey.jp/archives/2448/feed 0 http://pc.casey.jp/archives/2441 http://pc.casey.jp/archives/2441#comments Sun, 15 Aug 2010 23:40:53 +0000 admin http://pc.casey.jp/?p=2441 jQuery を利用してフローティングポップアップを行うライブラリ。ライセンスはMITライセンス。内容は多彩であり、デザインもよい。使用するだけでワンランク上のシステムに感じる（かも） ◆CakePHPから利用する場合 ◇CSS内を書き換える： 前：　background: url(image/pw_tbar_l.png) left top no-repeat; 後：　background: url(‘../../img/popupwindow/pw_tbar_l.png’) left top no-repeat; ◇Viewのサンプル：   echo $html->css(‘popupwindow/popupwindow’);   echo $javascript->link(‘popupwindow/jquery-1.2.6.min’);   echo $javascript->link(‘popupwindow/popupwindow-1.8.1′);   <a href=”/items/select” onclick=”new $pop( this.href, { type: ‘iframe’, title: ‘test’, width: 900, height: 400 } ); return false;”>iframeTest</a>   <a href=”javascript:;” onclick=”new $pop( ‘ModalTest’, { type: ‘alert’, title: ‘ModalTest’, modal: true } );”>ModalTest</a> ◆参考文献・デモ サンプル：ポップアップウィンドウ [...]]]> http://pc.casey.jp/archives/2441/feed 0 http://pc.casey.jp/archives/2433 http://pc.casey.jp/archives/2433#comments Sun, 15 Aug 2010 22:27:49 +0000 admin http://pc.casey.jp/?p=2433 prototype も jQuery もそれぞれをベースとして開発された素晴らしいものがいくつもある。最近ではjQueryの方が人気なのだろうか。prototypeも根強い人気がある。 さて、それらを共存させる方法はいつか見つけなければならないだろうと思っていたが、いよいよその時がきた。どちらもCakePHPで使う必要が出てきたからだ。 ところが簡単に解決されることがわかったのでそのメモ。 <script src=”prototype.js”></script> <script src=”jquery.js”></script>  <script> jQuery.noConflict(); var j$ = jQuery; </script> （「jQuery と prototype.js を同時に使う。（$(); のコンフリクト回避）｜JavaScriptプログラムメモ｜プログラムメモ」より引用） 参考文献 prototype.jsとjquery.jsの併用がうまくいきません。… – JavaScript – 教えて！goo : http://oshiete.goo.ne.jp/qa/5923728.html prototypeとjQueryを併用しない方がいい: ぷ～ろぐ : http://into.cocolog-nifty.com/pulog/2009/02/prototypejquery.html jQueryとPrototype.jsを併用/共存してみる – めも帖 : http://d.hatena.ne.jp/d4-1977/20091010/1255156663 jQuery 1.1 と他のライブラリ（Prototype, YUI, MooToolsなど）を併用する方法 – のほほん徒然 : http://d.hatena.ne.jp/uchiuchiyama/20070118/using_jquery_with_other_javascript_libraries jQueryとprototype.jsを共存させる方法 | CSS Lecture : http://www.css-lecture.com/log/javascript/029.html jQuery [...]]]> http://pc.casey.jp/archives/2433/feed 0 http://pc.casey.jp/archives/2001 http://pc.casey.jp/archives/2001#comments Fri, 04 Jun 2010 08:12:18 +0000 admin http://pc.casey.jp/?p=2001 すでに動作する MVC がある。と言ってもほとんど bake しただけ。これを Ajax する場合のメモ。 contoroller と view を変更する。 ◆コントローラーの変更 ◇明示的にヘルパーを指定する var $helpers = array(‘Html’, ‘Form’, ‘Javascript’, ‘Ajax’); ◇修正前（bakeしただけ）：  function add() {   if (!empty($this->data)) {    $this->QuoteChild->create();    if ($this->QuoteChild->save($this->data)) {     $this->Session->setFlash(__(‘The QuoteChild has been saved’, true));     $this->redirect(array(‘action’=>’index’));    } else {     $this->Session->setFlash(__(‘The QuoteChild could not be saved. Please, try again.’, true));    }   }   $quotes = [...]]]> http://pc.casey.jp/archives/2001/feed 0 http://pc.casey.jp/archives/633 http://pc.casey.jp/archives/633#comments Thu, 04 Mar 2010 21:45:52 +0000 admin http://pc.casey.jp/?p=633 JavascriptでCookie扱うためのサンプルはたくさん見つけたものの、どれも扱いにくい。仕方なく自分で作るかと思ったときに、ライブラリを探してみようと思った。そこで発見したのが「CookieManager」。これを使うことにした。 確認した範囲ではCookieManagerは日本語が扱えたほか、読み出し、書き込みが簡単に行え、有効期限の設定も可能だった。 ◆参考実装 ◇HTML <script language=”javascript” src=”/js/prototype.js”></script> <script language=”javascript” src=”/js/cookiemanager.js”></script> ◇js var manager = new CookieManager(); window.onload = function() {  for(var t=0; t<ids.length; t++)  if(manager.getCookie(ids[t])){   document.getElementById( ids[t] ).value = manager.getCookie( ids[t] );  } } function checkSubmit(){  for(var t=0; t<ids.length; t++){   manager.setCookie(ids[t], document.getElementById( ids[t] ).value);  } } ◆関連投稿 pc.casey.jp » CakePHPでbody onloadを使う : http://pc.casey.jp/archives/627  ◆参考文献 [JavaScript] [...]]]> http://pc.casey.jp/archives/633/feed 0 http://pc.casey.jp/archives/1114 http://pc.casey.jp/archives/1114#comments Thu, 15 Jan 2009 17:48:03 +0000 admin http://www.casey.jp/wp/pg/jquery-javascript-%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/ jQuery は JavaScript フレームワーク。 公式サイト jQuery: The Write Less, Do More, JavaScript Library : http://jquery.com/ 参考文献 jQuery 1.2.6 日本語リファレンス : http://semooh.jp/jquery/ jQuery入門 : http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ jQuery を使って Ajax 開発を単純化する : http://www.ibm.com/developerworks/jp/xml/library/x-ajaxjquery.html ブラウザ間の差異を気にせず、自由自在にレイアウトできるようになるjQueryのプラグイン『jQuery UI.Layout Plug-in』 – IDEA*IDEA ～ 百式管理人のライフハックブログ ～ : http://www.ideaxidea.com/archives/2009/01/jquery_ui_layout_plugin.html jQuery と prototype.js を同時に使う。（$(); のコンフリクト回避）｜JavaScriptプログラムメモ｜プログラムメモ : http://logic.stepserver.jp/memo.cgi/archive/499/ この記事を読んだ人は、こんな記事にも興味をもっていますjQueryとprototypeを共存させるCakePHP AjaxしてみるJavaScript フレームワーク – prototype.js]]> http://pc.casey.jp/archives/1114/feed 0