グーグル 無料のウェブ制作ツール Web Designerを公開
Googleからものすごそうなツールが登場。Adobeのツールがすべて合体したようなツールです。Illustratorのようなパス描画を可能とし、3Dビューで編集まで可能、さらにAdMobの設定までできてしまい、タイムラインでHTML5のアニメーションまでできてしまうようです。 直感的ツールで作ったデザインをマルチデバイスに対応したウェブページとして吐き出してくれるようです。又、デザインツールで作られたコードをコードビューに切り替えて直接編集することまでできてしまい、まさにかゆいところの手が届く感じの機能が網羅されているようです。 新規ファイル作成画面 3Dビューを備えたイラストレーター的ツール チュートリアルがこちらで用意されています。 Google Web Designer Help これは使い込んで見て損はなさそうですね。恐ろしいツールが出てきてしまいました。Adobeはどう出る？
誰のためのHTML5？ウェブとテレビと出版と | DECONCEPTER
HTML5はどんな実益をもたらしたのか？正直まだ何ももたらしていないと思う。もたらしたのは「未来への淡い期待とカオスだ」と現状では言わざるをえない。去年から徐々に盛り上がり始めたHTML5は今年に入り一気に熱を帯びて加速した。 言葉の盛り上がりとは裏腹に語られていたメリットを思ったより享受できていないどころか機種やブラウザ依存の差異に苦しんで、コストがかさんでいるのが現状だろう。そんな中仕様策定完了のお知らせが舞い込んできた。W3CがHTML5仕様策定完了を発表、相互運用性テストおよびパフォーマンス向上へ HTML5が話題に上がり始めて3年が過ぎ、現場とは裏腹により一層過熱を見せるであろう来年からの展開をそろそろ想定しておきたい。HTML5の捉え方も仕様も立場やビジネスによって多岐にわたっている。整理しきれない上、難しい話題だが、ぱっと見渡した全体観をざっくりと見ていきたいと思う。この記事
IE6（すっとこどっこい）でJavaScriptのデバッグをする方法 | DECONCEPTER
JavaScriptはconsoleで確認したい。FirefoxのFirebugプラグインやGoogle Chrome Developer toolsの登場以来、人はその快適さに心を奪われ、consoleの無いブラウザで確認するという習慣を捨てた。 タイトなスケジュールで新規ページを作成する際、ついついIE6/7（すっとこどっこい）の確認をおろそかにしてしまうことがあります。その理由にデバッグの方法が面倒という点が挙げられます。 IE8からは開発者ツールを使ってconsoleを用いたデバッグが可能ですが、問題はIE7以下です。いざデバッグをする必要が出た時に困らないよう、IE6含む複数バージョンでJavaScriptのconsoleデバッグが出来る環境を整えておきましょう。 IETesterではJavaScriptのデバッグができない 複数バージョンのIEの表示確認のためのIETester
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
IE10とHTML5とCSS3とレスポンシブデザインと | DECONCEPTER
ウェブサイトのWindows 8 向け対応 iPad Miniややたら薄いiMacが発表されて賑わっている中恐縮だが、今日はIE10にWEBサイトを対応させるために最低限押さえておきたいポイントを見ていきたいと思う。 スナップモードとデスクトップモードがあるWindows 8のIE10にウェブサイトを最適化させるにはいくつかポイントがあるようだ。 IE10独自のviewport 実はまだviewportはW3Cにより策定段階にある。IE10ではメトロ？スタイル用のネイティブアプリを作成するためのアプローチとして独自のviewport指定をできるようになっている。Windows 8のデバイス向けにレスポンシブデザインを施すには、下記のように指定する。 @-ms-viewport{width: device-width;} コンテンツの幅をデバイスにフィットさせたくない場合は下記のように指定す
HTML上で直接CSSを編集！次世代エディタEdge Code | DECONCEPTER
HTMLコーディングの次世代標準機能を備えるエディタ 先日紹介したAdobe Edge Tools & Servicesのエディタ担当Adobe Edge Codeを紹介します。対応OSはWindowsとMac OS Xで現在プレビュー版で無償で使うことができる。 先行して公開されているオープンソースプロジェクトBracketsをコアに採用しており、革新的な機能が備わっている。次世代エディタの標準となりそうな機能の解説を盛りだくさんでみていこう。 尚、ショートカットはMacベースで説明します。Winの方は適宜CmdをCtrlに読み替えてください。 HTMLファイル上から各タグのCSSを直接オープン これは感動的過ぎる。HTMLファイル内のスタイルを編集したいタグにカーソルを合わせ、Cmd + Eを叩くと、なんと直下にCSSの定義が呼び出されて表示される。奇跡だ。 なぜこの機能を今まで他のエ
興味ないけど知っておこう！Windows8の気になる8つのポイント | DECONCEPTER
アジャイルな変貌を遂げ続けるOS Windowsの新バージョン 「もうインターフェース変えるの法律で禁止しようや」「タッチUIベースは普通のPCでは使いにくいだろう」などと騒がれる革新的な新OS Windows 8が10月26日発売に発売される。 まるで今流行のアジャイル開発中のように次々とUIが変わるWindows。本当のリリースはいつなのだろうか。興味はないが、仕事上最低限の特徴は知っておかないと色々と不便なので、押さえておきたいポイントをみていこうと思う。 1. タブレットからノートPCへ変形するトランスフォーマーだ 私の分身、ネクストイノベーションの日向徹も使っていたWindows 8だが、どのような機能があるのだろうか。 まずは本家のサイトの動画を見てもらいたい。Windows 8 Release Preview Start画面。今までのWindowsとはなにもかも違うと言っても
jQueryより20倍速い！最強トゥイーンライブラリTweenMaxJS | DECONCEPTER
Flash界最強ライブラリの一角 jQuery animateよりも圧倒的パフォーマンス。Flashの最強アニメーションライブラリTweenMax。JavaScript版があるのはご存知でしょうか。 TimlineMax/Lite TweenMax/Liteの4つのライブラリ群の総称でGSAP JSというパッケージ構成です。※要ライセンス注意（後述） まずはその圧倒的パフォーマンスを体感してください。プルダウンから主要ライブラリを選んで、STARTを押すと右下のfpsの数値が変わります。 GreenSock Animation Speed Test 豊富なアニメーション機能 GSAP JSの主要な機能として下記の物が挙げられます。パララックスなどのインタラクティブなサイトを作る上でもとてもすごく重宝しそうです。 ベジェアニメーション 繰り返し 逆再生 時間指定 一時停止 フレームラベル ゆ
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
IE8切り捨て準備はいいか？jQuery2.0 2013年リリース予定 | DECONCEPTER
さようなら、InternetExplorer8 2012年も後3ヶ月を切りました。今年6月に出たアナウンスの予定で行くと来年jQueryは初のメジャーバージョンアップを迎えます。 jQuery2.0の主な機能等はまだ特にアナウンスされていませんが、注目はなんといってもIE8以下をサポート対象から外すという点です。 HTML5の時代が本格的に到来 これまでjQueryがWEB開発の世界にもたらしたメリットは計り知れません。WEBサイトを作っている方でお世話になったことの無い方はほとんどいないでしょう。 jQueryがIE8以下のサポートを切るということは、jQuery2.0のリリースと共にHTML5が標準として使われるようになるまで秒読み段階に入ると考えてもいいかもしれません。 2013年、IE8以下にどのように対応するかが問われる IE対応なんてやってられない 近年モバイルデバイスの普及に
知らない人は遅れてる？新Zen-Coding Emmet
頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
この順番で読めばOK！JavaScriptを理解するための14冊 | DECONCEPTER
JavaScriptの書籍はjQueryやサンプル中心のチップス本などを含めると、多数出ており、これから勉強したい人にとってはどれから読めばいいか迷うところだと思います。 今日はここ数年で出た書籍の中で初級者から脱中級者になるまでに読みたい書籍を、この順番で読めばステップアップできるという内容で紹介したいと思います。 STEP1. 初心者へのおすすめはダントツでこれ一択。 初心者向けの内容としてはこれがダントツでおすすめです。内容が易しく丁寧な上にサポートサイトで書籍の内容を動画で説明してくれています。 Amazon.co.jp： よくわかるJavaScriptの教科書: たにぐち まこと: 本 サポートサイトはこちら STEP2. 全体を把握するには十分なボリューム。脱初級者向けにはこの2冊。 2冊とも初級者にとっては少し厳しい内容になっていますが、この2冊が理解できれば後は作りまくる
HTML5でFlashに近づけるか？Adobe AnimateをJavaScriptで制御する | DECONCEPTER
手軽なHTML5アニメーションを作るならこれがベストかも 前回Adobe Edgeの雑感を書いたが、今回は実際にEdge Animateを使ってみる。アニメーション自体を作るのは簡単だが、クリックしたら再生など、ちょっとしたインタラクティブ性を加えるにはJavaScriptの記述が必要になる。手順としてまずAdobe Animateでアニメーションを作り、さらにJavaScriptで制御してみたいと思う。 今回作るサンプル 単純なサンプルではあるが、PLAYボタンを押したらアニメーションが開始し、ボタンの状態をPAUSEボタンに変化させるトグルボタンの実装と、アニメーションが一回再生されるごとにカウンターの数字が上がっていくサンプルを作る。 デモ Edge Animateで作られる要素 コンポジションとシンボルの2つの考え方で構成される。Flashで言うところのStageとMovieCli
TypeScriptでjQueryを使ってJavaScript MVCメモ帳を作る | DECONCEPTER
jQueryを使ってメモ帳アプリを作る jQueryの定義ファイルは公式サンプルのいくつかに同梱されている。jQueryUIの定義ファイルと合わせて下記にもコミットした。今回はなんちゃってMVCでメモ帳を作る。機能は保存ボタンを押したらlocalStorageにデータを保存して一旦とじてもメモ帳として使える簡易Webアプリとする。 TypeScriptをjQueryで使う方法 TypeScriptでjQueryを記述したファイルをコンパイルしようとしても The name 'jQuery' does not exist in the current scope となってjQueryなんてありませんと怒られてしまう。jQueryを使ったコードをコンパイルしたい場合はjQueryの定義ファイルを読み込む必要がある。 jQueryの定義ファイル jQueryの使い方 定義ファイルを作業フォルダに
なぜ次々とJavaScriptコンパイラが生まれるのか。 — DECONCEPTER
最もJavaScriptに近いJavaScriptコンパイラ 先日MicrosoftからTypeScriptというJavaScriptコンパイラが公開されました。ファーストインプレッションとしては今までのJavaScriptコンパイラと比べると若干敷居が低く感じます。まず驚いたのはドキュメントがWordファイルだったこと。早速ダウンロードしてみたら一部文字化けしていました。さすが。PDFも用意されていたのでかろうじてドキュメントを読めました。Webページで用意して欲しい。 JavaScriptの記法そのままに型付けができる TypeScriptでまず好印象なのがJavaScriptのコードをそのまま書いてもコンパイルされるところ。又、「Type」ScriptというだけあってさらにJavaScriptの記法に型を付けられる。例えばstringと指定すればstringのプロパティをシンタックス
OREPONでクーポン出して売れて感じたこと — DECONCEPTER
仲間内のサービスを認知させるためのサービス？ 金曜にリニューアルされたOREPONですが、現在火曜日の時点で自分のクーポンにたどり着く導線が用意されていません。発行した「javascriptを実はあんまりわかってない人の為の初心者講座」のクーポンIDは92ですが、クーポンID93の「オオカワタツヤを1日8時間(休憩別)拘束しませんか?」が先にトップページに掲載され、依然自分のクーポンが陽の目を見ることは無さそうです。 よくみると先にトップに出たクーポンは顔面広告というlivertyのサービスのようですね。livertyのサービスクーポンが優先的に出ている印象です。 自分で売りやがれ！ 自分で売りやがれ！そう理解しました。 よくよく考えればgumroadもサイトでプロダクトを紹介するページはありません。 自分を売るわけだから、自分でツイートしたりブログ書いたりして自分で売るのが当たり前だ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
