マクマガ http://makumaga.jp The markup magazine. Mon, 25 Jan 2010 09:39:12 +0000 ja hourly 1 リッチなインターフェスを作れるJavaScriptライブラリ「UKI」 http://makumaga.jp/javascript/%e3%83%aa%e3%83%83%e3%83%81%e3%81%aa%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%82%b9%e3%82%92%e4%bd%9c%e3%82%8c%e3%82%8bjavascript%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%80%8cu/ http://makumaga.jp/javascript/%e3%83%aa%e3%83%83%e3%83%81%e3%81%aa%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%82%b9%e3%82%92%e4%bd%9c%e3%82%8c%e3%82%8bjavascript%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%80%8cu/#comments Mon, 25 Jan 2010 09:39:12 +0000 ayohata http://makumaga.jp/?p=108 http://ukijs.org/

UKI — Simple UI Kit for complex web apps

リッチなインターフェスを作れるJavaScriptライブラリが色々とあります。
この「UKI」を使えば、GoogleWaveのようなインターフェスも100行程度で構築できます。
その他、スライダーやリストを作れたりします。

サンプルも充実しているので、ぜひ使ってみたいです。

UKI — Simple UI Kit for complex web apps

関連：

使いこなすとスゴそうなJavaScriptによるUIライブラリ『UKI』

]]> http://makumaga.jp/javascript/%e3%83%aa%e3%83%83%e3%83%81%e3%81%aa%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%82%b9%e3%82%92%e4%bd%9c%e3%82%8c%e3%82%8bjavascript%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%80%8cu/feed/ 0 DreamweaverでWordPressのテンプレートコーディングを便利にするエクステンション http://makumaga.jp/cms/wordpress/dreamweaver%e3%81%a7wordpress%e3%81%ae%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%82%92%e4%be%bf%e5%88%a9%e3%81%ab%e3%81%99%e3%82%8b/ http://makumaga.jp/cms/wordpress/dreamweaver%e3%81%a7wordpress%e3%81%ae%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%82%92%e4%be%bf%e5%88%a9%e3%81%ab%e3%81%99%e3%82%8b/#comments Sun, 24 Jan 2010 14:45:08 +0000 ayohata http://makumaga.jp/?p=103 WordPressを使うマークアップエンジニアは多いと思う。
また、マークアップをDreamweaverを使ってるのであれば、おすすめのエクステンションがあります。

このThemeDreamerを使えばデザインビューで見ながら、WordPressのデザインを行えます。
また、includeしているファイルもレイアウト確認でき作業できます。これはとても便利です。
ただし、残念ながらフリーではなく$49.95になります。

また、WordPressのテンプレートタグを使えるようになるTAGStentionというDreamweaverのエクステンションがあるが、こちらは2006年で更新が止まっているが、一部使えるためこちらもおすすめする。

参考：
DreamweaverでWordPressサイトを作るならいれておくべき機能拡張　2本

WordPress Extension for Dreamweaver

Solutoire.com › TAGStention

]]> http://makumaga.jp/cms/wordpress/dreamweaver%e3%81%a7wordpress%e3%81%ae%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%82%92%e4%be%bf%e5%88%a9%e3%81%ab%e3%81%99%e3%82%8b/feed/ 0 Web Directions East2009カンファレンスレポート http://makumaga.jp/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%bb%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc/%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88/web-directions-east2009%e3%82%ab%e3%83%b3%e3%83%95%e3%82%a1%e3%83%ac%e3%83%b3%e3%82%b9%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88/ http://makumaga.jp/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%bb%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc/%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88/web-directions-east2009%e3%82%ab%e3%83%b3%e3%83%95%e3%82%a1%e3%83%ac%e3%83%b3%e3%82%b9%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88/#comments Tue, 01 Dec 2009 01:54:22 +0000 ayohata http://makumaga.jp/?p=80 Web Directions East200911月11日から13日までWeb Directions Eastがベルサール九段にて開催された。
11日、12日はワークショップが、13日はカンファレンスが行われた。

カンファレンスではWeb Directions East代表の菊池氏の挨拶から始まり、昨年より規模も大きくなりまた来年も行いたいと意気込みを語った。Web Directionsとしても来年イギリス開催が決まっている。
Web Directionsの代表であるJohn Allsopp氏からの挨拶では、キーワードとして世界不況を語った。また、「このイベントを通じて、日本のコミュニティと世界のコミュニティの交流を深めてほしい」と、海外からのエキスパートが集まるこのイベントならではのポイントを語った。 オープニングキーノートでは、Cameron Adams（キャメロン・アダムス）による『Google Wave の裏舞台』Making wavesについて語られた。

John Allsop google waveの舞台裏

会場ではランチ時にはYahoo!のブースでもショートセッションが行われた。
他にも、オライリーの本の販売や当日限定のガチャガチャも販売されており、当りが入っていると書籍１冊プレゼントなどが行われた。 また、先行販売されたAndy Clarkeの「プロクリエイターの作例に学ぶ XHTML+CSS達人テクニック (Web Standards Creativity) 」がマイコミブースにて販売されており、他多数の書籍が販売されていた。また、今年頭に発売されたAndy Clarke著の「Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS) 」は来場者の意識が高いこともあり、既に持っている来場者も多かったとのこと。

サポーターであるmy gengoブースでは自社サービスの紹介を行っていた。翻訳のクラウドソーシングサービスで、高品質な翻訳を安く提供しているとのこと。ユーザとしては、外国人からのメールの翻訳やiPhoneアプリや海外向けのウェブサービスの翻訳で、日本語から英語は1文字3円からで提供しており、数千円でそうした翻訳サービスを受けれるのはうれしいことである。

wde2009_04 マイコミブース オライリーのガチャガチャ

盛況のうち終了したWeb Directions East2009であるが、来年もまた規模を拡大し、より多くのWebに関わる人々の参加を期待したい。

関連サイト WDE2009 WDE2009　カンファレンスの資料

]]> http://makumaga.jp/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%bb%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc/%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88/web-directions-east2009%e3%82%ab%e3%83%b3%e3%83%95%e3%82%a1%e3%83%ac%e3%83%b3%e3%82%b9%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88/feed/ 0 プロパティの値を初期化するCSS http://makumaga.jp/css/%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%81%ae%e5%80%a4%e3%82%92%e5%88%9d%e6%9c%9f%e5%8c%96%e3%81%99%e3%82%8bcss/ http://makumaga.jp/css/%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%81%ae%e5%80%a4%e3%82%92%e5%88%9d%e6%9c%9f%e5%8c%96%e3%81%99%e3%82%8bcss/#comments Wed, 25 Nov 2009 05:53:36 +0000 ayohata http://makumaga.jp/?p=76 具体的なノウハウ、テクニックがよく紹介されると評判のCSS HappyLifeにて、CSSの各プロパティを初期値にするCSSが紹介されている。

書き手の平澤氏は「使いどころとしては、ごちゃごちゃ複雑になってきたCSSが何か当たってて変だったりする時や、取り合えず初期値に戻してみたい時ですね。」と紹介している。

このプロパティの初期値とは、W3Cで公開されているAppendix F. Full property tableでInitial Value(初期値)で記載されている値を記述しているとのこと。

各プロパティの値を初期値にする、initial_value.css

]]> http://makumaga.jp/css/%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%81%ae%e5%80%a4%e3%82%92%e5%88%9d%e6%9c%9f%e5%8c%96%e3%81%99%e3%82%8bcss/feed/ 0 WordPressがベストCMS賞を獲得 http://makumaga.jp/cms/wordpress/wordpress%e3%81%8c%e3%83%99%e3%82%b9%e3%83%88cms%e8%b3%9e%e3%82%92%e7%8d%b2%e5%be%97/ http://makumaga.jp/cms/wordpress/wordpress%e3%81%8c%e3%83%99%e3%82%b9%e3%83%88cms%e8%b3%9e%e3%82%92%e7%8d%b2%e5%be%97/#comments Wed, 18 Nov 2009 05:35:22 +0000 ayohata http://makumaga.jp/?p=74 2009年オープンソースCMSアウォードでこのマクマガもお世話になっているWordPressが「ベストオープンソースCMSアウォード」を獲得した。
このベストCMSアウォードは1万2000以上の推薦の中で投票で決まるとの事。

この栄誉に公式ブログでは『ドラマ HEROES のヒロ・ナカムラが初めて時間と空間をねじ曲げるのに成功してタイムズ・スクウェアに降り立ち、「やった！｣と叫んだ時のような気持ちです。』と書いているが、私はHEROを見ていないので、例えるなら「コーディングが終わってIE6で確認したら、崩れが一つもなかった、ヤッター！」といったぐらい嬉しいのだと思う。

WordPressコミュニティの皆様おめでとうございます。

関連サイト
Open Source CMS Award
WordPress、ベスト CMS 賞を獲得

]]> http://makumaga.jp/cms/wordpress/wordpress%e3%81%8c%e3%83%99%e3%82%b9%e3%83%88cms%e8%b3%9e%e3%82%92%e7%8d%b2%e5%be%97/feed/ 0 Internet Explorer 9にWebKitを採用(してほしいという声がある) http://makumaga.jp/browser/internet-explorer-9%e3%81%abwebkit%e3%82%92%e6%8e%a1%e7%94%a8%e3%81%97%e3%81%a6%e3%81%bb%e3%81%97%e3%81%84%e3%81%a8%e3%81%84%e3%81%86%e5%a3%b0%e3%81%8c%e3%81%82%e3%82%8b/ http://makumaga.jp/browser/internet-explorer-9%e3%81%abwebkit%e3%82%92%e6%8e%a1%e7%94%a8%e3%81%97%e3%81%a6%e3%81%bb%e3%81%97%e3%81%84%e3%81%a8%e3%81%84%e3%81%86%e5%a3%b0%e3%81%8c%e3%81%82%e3%82%8b/#comments Wed, 18 Nov 2009 05:28:40 +0000 ayohata http://makumaga.jp/?p=71 ブログメディアであるPublickeyの「Internet Explorer 9が今晩発表されるかもしれない」というエントリーで以下の内容が書かれている。

Foley氏は今晩のキーノートでInternet Explorer 9の情報が少しだけ語られるだろうと、次のように書いています。
しかもFoley氏のブログでは、WebKit版のInternet Explorer 9が一部の開発者などからは期待されているといいます。もしもマイクロソフトがWebKitを採用するとなれば大きなニュースになるでしょう。

IE9にWebKitが採用されれば、IE&Safari VS Firefoxという構図ができそうだが、実際にFoley氏のブログを見ると「WebKitを採用してほしいという声を聞く」という発言にとどめられており、実際に可能性があるかはわからない。

また、残念ながら今回のイベントではIE9のプレビュー公開は無い、とMS関係者が明らかにしている。

関連サイト
Internet Explorer 9が今晩発表されるかもしれない

]]> http://makumaga.jp/browser/internet-explorer-9%e3%81%abwebkit%e3%82%92%e6%8e%a1%e7%94%a8%e3%81%97%e3%81%a6%e3%81%bb%e3%81%97%e3%81%84%e3%81%a8%e3%81%84%e3%81%86%e5%a3%b0%e3%81%8c%e3%81%82%e3%82%8b/feed/ 0 マークアップエンジニアのキャリアパス http://makumaga.jp/%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2/%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2%e3%83%91%e3%82%b9/ http://makumaga.jp/%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2/%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2%e3%83%91%e3%82%b9/#comments Mon, 09 Nov 2009 05:10:55 +0000 ayohata http://makumaga.jp/?p=68 先日、livedoorでマークアップエンジニアとして働くhamashun氏のブログに以下のようなエントリーが上がった。

HTMLコーダーとかマークアップエンジニアのキャリアパスについて

エントリーでは、まず結論として「HTMLとCSSしかできない人は、そろそろ他の事も始めた方が良い。」と書いている。
私もその通りだと感じる。理由としては、それだけしか出来ない人、成長しない人は現場に居ても意味がないからだ。ずっとそれだけやりたい、突き詰めてやりたいという人は独立すれば良いと思っている。

当然、在籍年数が長ければほとんどの会社で求められることが増える。ディレクション能力だったり、JavaScriptも覚えてなど。
そのために、その現場にあわせた成長、知識の吸収は必要である。

そのため、このブログでも書かれてるとおり「答えにならない答えですが、どの方向にも進めると考えています。」はその通りである。

また、考えなければいけないのは、自分が稼がなければいけない売上げである。
企業は、売上げ利益をもって回っている。メディア企業の場合、そういった数字の管理はマネージャーが管理している可能性が高いが、制作会社なら自分の担当してる範囲がどれだけの売上げを担っているのかは教えてもらえるはずだ（教えてもらえない会社もあるようだが、、）
そうした、バランスも意識しなければ将来的に独立した際にどんぶり勘定となってしまう可能性も高い。

単なる、制作物の品質にこだわるだけでなく、ビジネスとして捉え、その中で自分の位置や役割をしっかり認識することも一つ重要だと提言したい。

]]> http://makumaga.jp/%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2/%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2%e3%83%91%e3%82%b9/feed/ 0 2009年を締めくくれ! Shift3 http://makumaga.jp/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%bb%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc/2009%e5%b9%b4%e3%82%92%e7%b7%a0%e3%82%81%e3%81%8f%e3%81%8f%e3%82%8c-shift3/ http://makumaga.jp/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%bb%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc/2009%e5%b9%b4%e3%82%92%e7%b7%a0%e3%82%81%e3%81%8f%e3%81%8f%e3%82%8c-shift3/#comments Fri, 06 Nov 2009 02:46:51 +0000 ayohata http://makumaga.jp/?p=66 2009年もあと２ヶ月を切った。

今年はHTML5,CSS3がキーワードとして出てきたり、JIS X 8341-3が改訂される予定だたのが伸びていたりと、色々とマークアップエンジニアにとって話題に事欠かない2009年であったが、そういったことをキーパーソン達が振り返るイベントがCSS Nite in Ginza, Vol.42、Shift3である。

Shift3は12月17日にアップルストア銀座で開催される。
以下が出演者である。

長谷川 恭久：キーノート
益子 貴寛（サイバーガーデン）：マークアップ
植木 真（インフォアクシア）：アクセシビリティ
原 一浩（karadesign/fxb）：デザイントレンド
新谷 剛史（セカンドファクトリー）：RIA
鷹野 雅弘（スイッチ）：ツール/

CSS Nite in Ginza, Vol.42

]]> http://makumaga.jp/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%bb%e3%82%bb%e3%83%9f%e3%83%8a%e3%83%bc/2009%e5%b9%b4%e3%82%92%e7%b7%a0%e3%82%81%e3%81%8f%e3%81%8f%e3%82%8c-shift3/feed/ 0 圧縮したコードを作れるエディタ snap{css} http://makumaga.jp/%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2%e3%80%81%e3%83%84%e3%83%bc%e3%83%ab/%e5%9c%a7%e7%b8%ae%e3%81%97%e3%81%9f%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%9c%e3%82%8c%e3%82%8b%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf-snapcss/ http://makumaga.jp/%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2%e3%80%81%e3%83%84%e3%83%bc%e3%83%ab/%e5%9c%a7%e7%b8%ae%e3%81%97%e3%81%9f%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%9c%e3%82%8c%e3%82%8b%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf-snapcss/#comments Fri, 06 Nov 2009 02:45:34 +0000 ayohata http://makumaga.jp/?p=63 CSSをコーディングする際はインデントなどを行うが、そのインデントなどは当然１つのデータであるため、大規模なサイトではそうしたインデントも無いほうが転送料の削減に繋がる。
そんな悩みを解決してくれるエディタがsnap{css}である。

collapse

このエディタでは、Collapsed Code(崩壊したコード)、Beautify Code(美しいコード)の2モードがあり、Beautify Codeモードでは普通にインデントや改行があり、Collapsed Codeモードではそれらの情報が消されて圧縮されている。
Windowsのみのソフトウェアであるが、膨大なコードで転送料が気になるマークアップエンジニアには役立つものではないであろうか。(via MOONGIFT)

関連サイト

snap{css}

]]> http://makumaga.jp/%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2%e3%80%81%e3%83%84%e3%83%bc%e3%83%ab/%e5%9c%a7%e7%b8%ae%e3%81%97%e3%81%9f%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%9c%e3%82%8c%e3%82%8b%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf-snapcss/feed/ 0 アンディ・クラークのプロクリエイターの作例に学ぶ XHTML+CSS達人テクニック発売決定 http://makumaga.jp/%e6%9b%b8%e7%b1%8d/%e3%82%a2%e3%83%b3%e3%83%87%e3%82%a3%e3%83%bb%e3%82%af%e3%83%a9%e3%83%bc%e3%82%af%e3%81%ae%e3%83%97%e3%83%ad%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%81%ae%e4%bd%9c%e4%be%8b%e3%81%ab/ http://makumaga.jp/%e6%9b%b8%e7%b1%8d/%e3%82%a2%e3%83%b3%e3%83%87%e3%82%a3%e3%83%bb%e3%82%af%e3%83%a9%e3%83%bc%e3%82%af%e3%81%ae%e3%83%97%e3%83%ad%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%81%ae%e4%bd%9c%e4%be%8b%e3%81%ab/#comments Thu, 05 Nov 2009 07:16:31 +0000 ayohata http://makumaga.jp/?p=58 このマクマガがメディアスポンサーさせてもらってる、Web Directions Eastでスピーカーをつとめる、アンディ・クラークの著書「Web Standards Creativity」の日本語訳「プロクリエイターの作例に学ぶ XHTML+CSS達人テクニック」が11月21日から発売となる。

アンディ・クラークの著書としては他にも「Webデザインプロフェッショナルワークフロー・バイブル」があり、非常に興味深いテクニックや考え方が紹介されている。

Web Directions East09の会場では、発売前にもかかわらず購入が可能で、ランチタイムには本人のサイン会も行われるとのこと。

プロクリエイターの作例に学ぶ XHTML+CSS達人テクニック (単行本（ソフトカバー）)
プロクリエイターの作例に学ぶ XHTML+CSS達人テクニック (単行本（ソフトカバー）)

関連サイト

「プロクリエイターの作例に学ぶ XHTML+CSS達人テクニック」発売決定
Andy Clarke（アンディー・クラーク）

]]> http://makumaga.jp/%e6%9b%b8%e7%b1%8d/%e3%82%a2%e3%83%b3%e3%83%87%e3%82%a3%e3%83%bb%e3%82%af%e3%83%a9%e3%83%bc%e3%82%af%e3%81%ae%e3%83%97%e3%83%ad%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%81%ae%e4%bd%9c%e4%be%8b%e3%81%ab/feed/ 0