iPad用サイトを見る
※iPad以外はhttp://copain.tv/に移動します。
ページ構成
全体のページ遷移はiScroll 4を使用しました。
ページの前後移動や指定ページへのジャンプ、iPadのタッチスクリーンに対応したスワイプでなめらかなページ移動を実現できます。
はまった点としてはページ移動のメソッドが3種類あって、それらを混ぜて使ってしまうとページ移動が上手くいかない場合がありました。今回はmyScroll.scrollToPage()のみを使用しました。
また、ページ領域内で画像などの要素をアニメーションさせる場合、ページ領域外から要素をフェードインさせたりすると画面がガクガク震えます。おそらくページ領域を監視している部分とバッティングしてしまうのだと思います。ページの領域内でアニメーションさせるのは問題ありませんでした。
アニメーション
アニメーションはCSS3アニメーションを使用しました。jQueryのanimateメソッドではスムーズに動かない場合があります。Flashムービーのような連続的なアニメーションを実行させるためにaddCommand – jQuery Pluginを使い、コールバック時にCSSのクラスを切り替えるようにしています。（addCommand.jsのプロパティーアニメーションは先述のjQueryのanimateメソッドを使用しているため今回は殆ど使っていません。）
メディアクエリー
端末の回転に対応させるため縦・横それぞれのCSSファイルを用意しました。縦と横でレイアウト、アニメーション（主に位置情報）が違う場合は設定をかき分ける必要があります。今回はjavascriptで端末の回転を判定していません。
まとめ
jQuery MobileやSencha touchなどフレームワークが出てきていますが、見た目のデザインありきでそれをページとして扱いたい場合などはiScroll 4はお手軽で結構いいなと思いました。もちろん案件次第ですが。
APKダウンロード
SimpleLightSetting v1.0
とりあえず野良公開します。
検証はGalaxyS2で行いました。
・Android OS1.6から使えるかと思います。
・明るさの自動設定は明るさ（環境光）のセンサーが付いている端末のみ使用できます。
イメージタグのalt属性をtitle属性にコピーします。title属性がない場合は作成されます。
altが空の場合はtitleも空です。
以下のリンクからダウンロードしてください。
altcopytotitle.zip
ダウンロードしたらzipファイルを解凍しmxpファイルを開いてインストールしてください。
メニュー ＞ コマンド ＞ alt属性をtitle属性にコピー を選択すると実行されます。
確認はwinxp バージョンは８で行いました。自己責任でお使いください。
Web WidgetとはDreamweaver CS4にAjaxのフレームワークやライブラリの機能を簡単に挿入して使えるようにする機能拡張です。
詳しくは以下のページが参考になります。
Adobe Edge: 2009年3月 Dreamweaver CS4のWeb Widgetを使ってみよう
このWeb Widgetは現時点では各ライブラリのバージョンが低くなっており、バグを含んでいる場合があります。
ですので最新のライブラリのバージョンのもので使いたいとか、あのライブラリないんだけど作ってみたいとか、
ライブラリを作っているが簡単に多くの人に使ってもらいたい場合などは
Web Widgetを作成するWidget Packagerで作り直す必要があります。
このWidget PackagerはAdobe Labsで公開されていますが、
英語の文献で敷居が高いので作成するのに必要と思われる以下の項目について翻訳しました。
（内容の検証はしていませんので保障はいたしませんが…）
- The Widget Workflow document: A description of the workflow from WDF to uploading to the Exchange.
- Developer’s Guide to the WDF: A detailed explanation of the WDF format.
widget packager 翻訳
翻訳の誤り等はコメントいただけるとありがたいです。
Have a good Dreamweaver life!
Fireworks CS4でのPDF書き出しではリンクも使えるようです。
他にも何か使えるかと思って
共有ライブラリのフォームとかを追加して書き出してみたけど
使えませんでした（画像になります。）
Outlook2007でHTMLメールが崩れる症状があり困っていました。
Vistaパソコンに添付されているOfficeスイートOutlook2007ですが、このメーラ
で受信されたHTML（文字を装飾しているメール）本文はかなり体裁が崩れ、見る
も哀れな状態になります。
これは、Outlook2007から、IEのHTML表示の体裁を整えるエンジンを使用せず、
Office内のWordの表示を利用しているからです。 WordはHTML形式の文書をむ
ちゃくちゃにすることで有名です。これはOutlook2007の根本的な設計にかかる
ため、今後パッチが当てられたり修正されることはなさそうです。どうしても
HTMLメールをきれいに表示させたい場合、Outlook2007を使わないほうが無難で
しょう。
http://www.terra-system.jp/win/2007/05/vistaoutlook2007html.html
いろいろ調べたところ条件付コメントでいけるみたいです。
全部画像のHTMLメールなら
＜!–[if gte mso 10]>
＜style>
body{ font-size:1px;}
＜/style>
＜![endif]–>
でOK。
各エレメントにスタイルを指定したいなら
こちらのエントリが参考になります。
メールクライアントごとのCSSサポート状況の解説とチートシート | コリス
なお使えるHTMLタグも制限されるようなので普段業務でDreamweaverを使っていれば
Download details: 2007 Office System Tool: Outlook HTML and CSS Validator
からWordMailSupportMacromedia.msiをイントールするとターゲットブラウザチェックでWord2007が選べるようになります。
エントリーの間が空いてしまいました。
2009年仕事始めです。
本年もこのブログともどもよろしくお願いします。
普段の業務で使えそうなものを探してまとめてみました。
尚、使用に関しては各自の責任で行ってください。
■ファイル管理系
Related Files for CS3
リンクされているJS,HTML,CSSファイルをプルダウンから選択して開くことが出来ます。
External Link Checker
外部リンクのチェックが出来ます。
JavaScript syntax checker
javascriptのエラーチェックが出来ます。
Expand Folders
フォルダすべて展開します。
Close Folders
フォルダすべてたたみます。
DreamweaverでSubversion+TortoiseSVNをFree＆日本語化で実現 | studio-fun.net
SVNを使っているならこれは必須！
Compare To
mxのバージョンから比較メニューが使えるようになります。
Ordinary SiteMap
簡単にサイトマップのページが作成できます。ｃｓｓベース。
■コーディング作成系
New Document From Selection
選択部分を元に新規ファイルを作成。
Load Site Selection
ファイルパネルで複数選択した画像をソート順（デフォルトはABC順）に挿入できる。
Replicator
選択部分のコピーする数を決めてペーストできる。
Dreamweaverのスニペットをバックアップ・リストアする拡張機能 – SnippetUtil for Win 1.0.0
タイトルままです。
Close Tags
p,li,tr,tdタグの閉じ忘れを閉じます。
Iframe Inspector
IFRAMEのプロパティをインスペクタで編集できるようになります。
■おまけ）
Set Table Dimensions to Background Image
選択したテーブルの背景画像を設定する。
Panels Toolbar
以下のようなツールバーでパネルの表示／非表示がコントロールできます。
Selection Menu for Coding Toolbar
コードツールバーに以下メニューを追加(Dw8以降だとほとんどの機能は搭載ずみ)
* Apply Backslash-comment Hack
* Apply Caio Hack
* Remove Backslash-comment Hack
* Remove Caio Hack
* Convert Tabs to Spaces
* Convert Spaces to Tabs
* Remove All Tags
* Convert Lines to Table
* Add Line Breaks
* Convert to Uppercase
* Convert to Lowercase
* Convert tags To Uppercase
* Convert tags To Lowercase
InstaGraphics Extensions for Dreamweaver MX 2004
テンプレート化されたデザインで画像テキスト、ビュレットが挿入できる
Advanced Manage Workspace Layouts
ワークスペースの書き出し、リストアが出来る。
LinuxだけではなくWindowsでもPHP+MySQL開発環境を動かしてみようとふと思いつき、
一度試してみようと思っていた VertrigoServ をWindowsXpにインストールしてみた。
ボタン一発インストールで Apache・PHP・MySQL その他いろいろ入っちゃう優れもの。
今回のインスコ結果は
* Apache 2.0.63
* PHP 5.2.6
* Mysql 5.0.51b
* Smarty 2.6.19
* SQLite 3.5.9
* PhpMyAdmin 2.11.7
* SQLiteManager 1.2.0
* ZendOptimizer 3.3.3
こんな感じ。
さてわくわくしつつ起動してみると、
いきなりそれですか＿|￣|○
もっと読む…
最も基本的なサンプルにほんの少し手を加えるだけでアコーディオンをマウスオーバーで開閉できるようになります。
変更手順：
- クラスAccordionPanelがついているdivタグにidをつける
- SpryDOMUtils.jsにリンクさせる
- Spry.$$(“.AccordionPanel”).addEventListener(“mouseover”, function(){sampleAccordion.openPanel(this.id); return false;});の1文を加える
以上で、クリックでしか開閉できなかったものをマウスオーバーで開くようになります。
実動サンプル
もっと読む…
SpryでDOMの取り回しをやる時、便利そうなSpry Element Selector Utility（SpryDOMUtils.js）の
日本語の情報を探したけど見つからなかったのでちまちま翻訳まがいのメモです。（正式な情報は参照元をご覧ください。）
実際に動作テストして翻訳していません。このユーティリティに関して足がかりになればという感じです。
間違いは指摘していただけるとありがたいです。
もっと読む…
