オープンソースで多機能な統合オフィススイートOpenOffice.orgでインベーダー風ゲームが出来る事を発見。僕はNeoOffice派だったので、まさかとは思ったが、普通に出来た。
やり方は簡単。「=GAME(“StarWars”)」と書く。ダイアログ的なのがでるので「OK」を押す。
左側に5個あるやつがキャラクター？かなんからしい。
こんな感じ。仕事はさぼらないようにしましょう。
前回はCookie機能&アニメーション&スクロール追随付きアコーディオンメニューについて書きましたが、jQuery.jsはprototype.jsと共存出来ない事が判明。lightboxも使っていたので動かなくなってしまいました。が、調べてみるとjQuery.jsでlightboxが使えるプラグインがあったので紹介します。
1. ダウンロード
http://leandrovieira.com/projects/jquery/lightbox/
からzipをダウンロードします。（2008/03 最新バージョン 0.4） js, css, images内のファイルを適当な所に置きましょう。画像へのリンクはjquery.lightbox-0.4.jsの27行目あたりからの
// Configuration related to images
imageLoading: ‘images/lightbox/lightbox-ico-loading.gif’, // (string) Path and the name of the loading icon
imageBtnPrev: ‘images/lightbox/lightbox-btn-prev.gif’, // (string) Path and the name of the prev button image
imageBtnNext: ‘images/lightbox/lightbox-btn-next.gif’, // (string) Path and the name of the next button image
imageBtnClose: ‘images/lightbox/lightbox-btn-close.gif’, // (string) Path and the name of the close btn
imageBlank: ‘images/lightbox/lightbox-blank.gif’,
を書き換えればok です。
2. head内に記述
<script type=”text/javascript” src=”http://hoge/jquery.js“></script>
<script type=”text/javascript” src=”http://hoge/jquery.lightbox-0.4.js“></script>
<link rel=”stylesheet” type=”text/css” href=”http://hoge/jquery.lightbox-0.4.css” media=”screen”>
<script type=”text/javascript”>
$(function() {
$(‘#id名 a’).lightBox(); //(‘ ‘)内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
});
</script>
と書きます。
<script type=”text/javascript”>
$(function() {
$(‘#id名 a’).lightBox(); //(‘ ‘)内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
});
</script>
の部分は例えばsettings.jsとか作って外部化しても大丈夫です（短いけど）
3. HTMLを記述
<div id=”id名”>
<a href=”大きい画像” title=”hoge”>
<img src=”サムネイル画像” alt=”hoge”>
</a>
</div>
みたいに書きます。id名をlightboxとかにしておけば分かり易いですね。 prototype.jsは削除して大丈夫です。
アニメーション付きのアコーディオンメニューはprototype.jsを使った物なんかが有名だけれども、それにCookieで開閉状況を記憶させておくものがなかなか見つからなかった。Cookieは使えてもアニメーションが使えなかったり、併用出来そうでもCSSのIDとClassが指定されていてそれ以外使えなかったり。が、発見。
http://sawa-s.com/scroll-accordion-menu.html
上記ページのダウンロードをクリック。設置方法も書いてありますが、付け加えてもう少し詳しく書いて行きます。
まず、ダウンロードしたファイルの中の「ddaccordion.js」「wrapscroll.js」「jquery.js」 「style.css」を自分のサイトの適当な場所にコピー。headに以下を記述します。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript" src="wrapscroll.js"></script>
コメントアウトになってる部分は消しちゃダメらしいです。そしてddaccordionメソッドの作成、wrapScrollオブジェクトの作成（動かす時のセッティングの内容みたいなもんです）をします。
<script type="text/javascript"><!--
ddaccordion.init({
headerclass: "expandable",
contentclass: "categoryitems",
collapseprev: true,
defaultexpanded: [0],
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
animatespeed: "normal"
})
// wrapScroll
var mov = new wrapScroll('accordion_menu','container','header');
mov.marginTop = 5; //上からのマージンを指定(px)
//--></script>
これはHTMLに書く必要はないので（ブログだったらテンプレートに書けば済みますが、普通の静的なサイトだったら面倒ですし、長い）例えば「settings.js」というファイルを作って、上記内容をコピペして、head内にリンクするのが良いと思います。その場合は
ddaccordion.init({
headerclass: “expandable”,
contentclass: “categoryitems”,
collapseprev: true,
defaultexpanded: [0],
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
animatespeed: “normal”
})
// wrapScroll
var mov = new wrapScroll(‘accordion_menu’,'container’,'header’);
mov.marginTop = 5; //上からのマージンを指定(px)
になります。それぞれの設定の内容はダウンロードしたサイトを参照して下さい。そしてHTMLに
<div id="accordion_menu">
<a href="http://sawa-s.com/"><div class="menuheader">HOME</div></a>
<div class="menuheader expandable">カテゴリー 1</div>
<div class="categoryitems">
<ul>
<li><a href="#">MENU 1-1</a></li>
<li><a href="#">MENU 1-2</a></li>
<li><a href="#">MENU 1-3</a></li>
<li><a href="#">MENU 1-4</a></li>
<li><a href="#">MENU 1-5</a></li>
<li><a href="#">MENU 1-6</a></li>
</ul>
</div>
・
・
・
のように記述します。べつに<li>を使わなくて<dl>とかでも大丈夫っす。それで「style.css」を適当に編集します。IDやClassを変える場合は必須。
メニューがスクロールについてくるのはいらないので、僕は使わないようにしました。「wrapScroll.js」のリンクをheadから削除して、「settings.js」の // wrapScroll以下を消せばokす。ちなみに wrapScroll.jsは法人利用などの場合はライセンスを取得する必要があるそうです。
追記
jquery.js はprototype.jsと共存出来ません。なのでlightboxなどを使っている人は動かなくなります。解決策を書いていますので、jQuery lightBox plugin – jQueryでLightBoxが使えるjavascriptを参照して下さい。
キーボードで様々な操作を素早く実現し、あたかもスーパープログラマーのように見えてしまう便利なアプリケーションがQuickSilverです。
とのこと。ダウンロードは
から。
マウスを使わないてアプリケーションを起動出来るし、iTunesの曲変えられるし、ファイルの圧縮とか、しまいにはSubversionのコマンドまで使えてしまったり、かなり便利。
こんな感じで、写真を→Photoshopで→開きます。という風に指定出来る。日本語には対応してないんですが（出来ない事も無い）例えば「システム環境設定」だったら「System Preferances」なので、SYとか打てば普通に出てきます。
ちなみに QuickSilverがあるとDockの意味があまり無くなる
お勧めプラグインは
らへんでしょうか。是非お試しを。
キーボードをワイヤレスにしたので、右クリックなんていらないぞ！スクロールボールなんていらないぞ！半透明じゃないのかよ！てか値段高いよ！と多々不満はあったものの我慢出来ずにマウスも購入。
結論から言うと、いままでワイヤードのマウスを使っていた人は慣れが必要。なぜかというと、
センサーの位置が全然違う。ワイヤレスは電池を入れるスペースが必要だからしょうがないと言えばしょうがないのだが、これがけっこうな問題で、いつも通り動かそうとすると（マウスの下半分だけ動かそうとすると）動かない。
まぁもちろんよい面もあって、やっぱりマウスのしっぽ部分ってけっこうなテンションがかかってたんだなぁと実感。 ちなみに右クリックとか各ボタンの機能はちゃんと設定出来たので安心。
MacでRails2.0.2環境を構築する(前半) の続き。
4. Railsのインストール
$ sudo gem install rails
何回か[Yn]と聞かれるので、yで。
5. sqlite3-rubyのインストール
$ sudo gem install sqlite3-ruby
1から4くらいまで選択肢が出るので、Macだから2を選択。
6. sqlite3のインストール
$ port search sqlite3
$ sudo port install sqlite3
これでok。けっこう時間かかります。
7. データベースの作成
リポジトリの場所で
$ rake db:migrate
$ ruby script/server
で、Webサーバが起動する。ブラウザでhttp://localhost:3000/にアクセスすれば、ようこそ的な画面が見れるはず。疲れたー
参考
http://jp.rubyist.net/magazine/?0004-RubyOnRails
http://wiki.fkino.net/?SQLite3-RubyInstall
http://lapangan.net/darwinports/
http://japan.cnet.com/blog/kenn/2007/12/19/entry_25003169/?ref=rss
Ruby on Railsで開発するサイトのUIデザイン等を担当する機会があったのでメモ。Mac OS X 10.4（Tiger）にRailsとsqlite3をインストールする手順です。
1. Xcodeのインストール
MacPorts(DarwinPorts)というものをインストールしなくてはならないのですが、それをちゃんと動かすために「X11 SDK」というものが必要。「X11 SDK」はXcodeに含まれているのでインストール。
http://developer.apple.com/tools/download/
上記URLからダウンロードするか、Macのインストールディスクからもインストール出来ます。インストールディスクからの方がいいとかどこかに書いてあった。しかし容量を食うね、約1GBあります。
2. MacPortsのインストール
http://www.macports.org/install.php
上記URLからダウンロード出来ます。pkgになっているのがお勧め。マウントしてインストール。 MacPortsのインストール先は/opt/local/binになります。使うたびに入力するのは面倒なので、
$ export PATH=/opt/local/bin:/opt/local/sbin/:$PATH
$ export MANPATH=/opt/local/man:$MANPATH
とやっておくと各種パスを/opt/localに通しておくことが出来る。できたらMacPortsを最新版にアップデートする。
$ sudo port -v selfupdate
しばし待つ。
3. RubyGemsのインストール
そんなこといわれても知らないが、TigerのRubyは壊れているらしく（壊れてるもん入れるなよと思うのは僕だけ？）Rubyも最新にアップデートする。
http://www.ruby-lang.org/ja/downloads/
最新版をダウンロード。 解凍して
$ cd readline-5.1.tar.gz
$ ./configure
$ make
$ sudo make install
$ sudo port install rb-rubygems
けっこう時間かかるけど我慢して待つ。rubyが最新になっている事を確認するには
$ ruby -v
ruby 1.8.6 (2007-03-13 patchlevel 0) [i686-darwin8.11.1]
続きは後半へ。Railsのインストール、sqlite3-rubyのインストール、sqlite3のインストールと続きます。まさか自分がこんなにターミナル使うとは思わなかった。（ターミナルはsayコマンドで遊ぶものだと思っていた、笑）
数百ページの静的コンテンツを制作する機会があり、原稿は上がって来次第作成&サイトマップは変更の可能性大という案件があって、いつもどうり制作して行ったらCSSの管理で後悔したので、CSSのファイル構成やら分割方法やら一回整理したくなったのでメモ。
とりあえず反省点としては
僕がいつもやっているのはhtml側では
<link rel=”stylesheet” type=”text/css” href=”css/import.css” media=”screen” />
<!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”css/ie.css” media=”screen” />
<![endif]–>
と書き、CSS側で
@charset “utf-8″;
@import “basic.css”;
@import “layout.css”;
と書く。InternetExpolerはそれ用にまとめて書きたいのでまとめ（実際には書かないで済む事が多かったりして…）主にHTMLタグの初期化用のbasic.cssとレイアウト用のlayout.cssにする。しかしこれでは、ページ数が多ければ多いほどlayout.cssが膨大なものになってしまう。今回の場合は
<link rel=”stylesheet” type=”text/css” href=”css/import.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/hogehoge.css” media=”screen” />
<!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”css/ie.css” media=”screen” />
<![endif]–>
みたいに、ある程度のまとまり（原稿の上がってきた時期やらおおまかなディレクトリごとや）で別のCSSを作成する状況になってしまった。考えてみたのは
<link rel=”stylesheet” type=”text/css” href=”css/import.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/layout.css” media=”screen” />
@charset “utf-8″;
@import “basic.css”;
@import “common.css”;
@import “ie.css”;
共通のCSS（主にID）はcommon.cssに。それ以外をlayout.cssにする。あんまり変わってないか。しかもこれじゃie.cssはハックを使わざるおえなくなる。まとまらんな。
参考 http://2xup.org/log/2006/10/17-2115
話は変わって、今日はウェブサイトで文字を斜めに配置出来んのか！と酒の席で談義になり、色々と試してみた。結果としては、なんとか出来る。というか、かなり面白い。これは近々作品にしたいです。是非ソースを見て笑っていただきたいです。
are currently browsing the notizbloc blog archives for 3 / 2008.