アットスタイルのWebmasterがHTML・CSS・アクセシビリティ・Movable Type 等、気になる事について色々と・・・
LionにアップグレードしたMacBook AirにMTの環境整いました
基本的には「Snow LeopardローカルにMovble Type環境をつくる（覚書）」でOK。違っている所といえば、XCode 4.1はMac App Storeからダウンロード。
MAMPを最新のバージョンにして、ImageMagickは予めアンインストールしておいた。
Movable Type 4.2・5.0・5.1が動いてます。
追記：LionではTinkerToolが使えないので.htaccess作成時にはちょっと戸惑った。Snow LeopardのMac miniからAirのhtdocsを開いてペーストしました。（ターミナルから作成すればよかったかも？）
追記：「mt-check.cgiが見つかりませんでした。」と表示されたのでp5-libwwwをインストール
sudo port install p5-libwww-perlWebページ高速化サービス「Page Speed Service」が発表されました
Page Speed Service is an online service to automatically speed up loading of your web pages. Page Speed Service fetches content from your servers, rewrites your pages by applying web performance best practices and serves them to end users via Google's servers across the globe.
訳すると以下のような感じでしょうか。
ページスピードサービスは、自動的にWebページの読み込みを高速化するオンラインサービスです。ページスピードサービスは、サーバーからコンテンツをフェッチし、Webパフォーマンスのベストプラクティスを適用することによって、ページが書き換えられ、世界中のGoogleのサーバーを経由してエンドユーザに提供しています。
さっそくテストで使ってみました。
CSS spritesやgzipなどには対応させていたのでかなり「イイセンイク」のではないかと思っていましたが、Page Speed Serviceを利用した場合には、トップページの表示完了までの時間を0.78秒短縮ができるらしいです。
表示速度を全く考慮していない状態だったら、かなりの効果があるかもしれませんね。
HTML5ではinputとtextareaに属性が追加されHTMLだけでいろんなことができるようになっている。IE以外の主要なブラウザで対応しているようなので「お問い合わせ」のページを編集してみた。
placeholder属性を追加。記入例をplaceholder属性で済ませようかと思ったけど、IE9でも全く対応していないので、仕方なく記入例は別途記述し入力していただく内容を表示した。
もちろんメールアドレスの入力部分にはtype属性の値をemailとしている。
また必須項目はrequired属性を追加し、CGIでのチェックの前に確認してもらうことができる。
便利ですね。
昨日リリースされたOS X LionをMacBook Airにインストールした。
Adobeの一部のアプリケーションが動作しないようですが、おおよそ問題はないようです。ただし、Movable TypeをインストールしているMAMP自体は動きましたがXCodeやいろんなモジュールが利用できなくなっており、環境を再構築する必要があります。
OS X Lionにした途端、TimeMachineに使っている外付けHDDが壊れちゃったのでローカルの環境構築はお預け、今夜作業の予定です。
また、大きく変更いたしました。
ulでolに大変シンプルになってきましたが、もう少し手を入れるかもしれません。
結局、Google +1ボタンを実装しました。
昨日の記事に少々カスタマイズ オプションを追加してあります。
<div class="g-plusone" data-size="small" data-count="false">Google +1</div>Googleのサービスは8月以降、バージョン7以前のIEはサポートされなくなります。Google +1は既にサポートされていないようですのでGoogle +1をご利用される時は、IE8以降やその他のブラウザをオススメします。
Google +1ボタンを付けてみようかと検討中。（まだ実装はしていません）
以下のページよりコードを取得して
カスタマイズをしなければ以下のようなコードとなる。
<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone></g:plusone>ボタンを表示する部分の記述を以下のように書き換えてみた。
<div class="g-plusone">Google +1</div>サンプルで作ったページがこれ。Untitled
実際にクリックしていただいたのですが、動いているようです。ただし、本当に正常な動作なのかよくわかりません...
Macに作業環境を移し始めてから、CSSはCSSEditで書いています。CSSファイルをWindowsマシンのCSSエディタに戻して（思い通りではないが）CSSプロパティの順序を統一させていました。かなり手がかかっていました。
「Dreamweaver用拡張機能でCSSプロパティを並べ替える - かたつむりくんのWWW」を参考にさせていただいてDreamweaverにCSS属性フォーマット Version 0.2をインストールしてみました。
適当に記述しても後でキレイに並べ替えられる。これはいい。ということで、ほとんどの作業をMacで行えるようになりました。
皆さんご存知の事だと思いますが、今までDreamweaverを使ってこなかったので全く知りませんでした。クリックするだけでいいなんて感激...
技術評論社さんから出版の「MovableTypeによる実用サイト構築術 ウェブシステムとしての活用ノウハウ MT5/5.1対応」をいただきました。ありがとうございました。
長内毅志さん（シックスアパート）・柳下剛利さん（シックスアパート）・柳谷真志さん（linker）, 野田純生さん（アルファサード有限会社）による共著です。
ウェブサイト制作の現場において，Movable Typeはサイト全体を一元的に管理するCMSとしての利用が一般化しました。しかし，簡単なお申し込みフォームの機能を付加するというだけで，別個にシステムを開発するケースが見られます。そこで着目したいのが，カスタムフィールドなどバージョン5/5.1から強化された機能です。ウェブシステムとしての活用可能性が拡大しています。本書ではイベント受付システムや不動産検索サイトなど，迅速に費用対効果の高いサイトを制作するテクニックを紹介します。
書籍案内：Movable Typeによる実用サイト構築術 ― ウェブシステムとしての活用ノウハウ｜gihyo.jp ... 技術評論社
メールフォームは誰でも思いつくけど、Chapter 3の「イベント受付システム」は面白い。プラグインでCSVをダウンロードできるようにすればMovable Typeだけで完成してしまう。Chapter 4の「グルメ情報サイト」はMTCSのカスタマイズをお考えの方にもおすすめです。
作成されたテーマをダウンロードし実際にコードや動作を確認できます。
著書「Movable Type 5.1 プロの現場の仕事術」もよろしくお願いします。
リニューアルして2週間経ちました。効果はこれから見えてくる思いますが、さらに細かい部分で修正・変更を行っています。
などなど
それにしても何時になったら終わるのでしょう...