グーグル 無料のウェブ制作ツール Web Designerを公開
Googleからものすごそうなツールが登場。Adobeのツールがすべて合体したようなツールです。Illustratorのようなパス描画を可能とし、3Dビューで編集まで可能、さらにAdMobの設定までできてしまい、タイムラインでHTML5のアニメーションまでできてしまうようです。 直感的ツールで作ったデザインをマルチデバイスに対応したウェブページとして吐き出してくれるようです。又、デザインツールで作られたコードをコードビューに切り替えて直接編集することまでできてしまい、まさにかゆいところの手が届く感じの機能が網羅されているようです。 新規ファイル作成画面 3Dビューを備えたイラストレーター的ツール チュートリアルがこちらで用意されています。 Google Web Designer Help これは使い込んで見て損はなさそうですね。恐ろしいツールが出てきてしまいました。Adobeはどう出る？
PHPやMySQLやセキュリティ対策が分かった気になる15冊 | DECONCEPTER
HTML5とかJavaScriptがもてはやされてるけどやっぱPHPだよねっ。一人でWEBサービス作れちゃう人とかカッコイイィィィィ。デザインはTwitter Bootstrapでィィし、やっぱサーバーサイド出来る人が輝いてるぅウィリリリリリ。 みたいな会話が各地で聞こえてくる昨今ですが、PHPはまだまだ現役で活躍していく言語だと思います。Facebookも今のところPHPで作られていますし、何よりもみんな大好きWordPressをカスタマイズするための基礎知識としてPHPを知っておくに越したことはありません。 PHPの本もとても多いですね。SmartyがいいとかPEARを使えとか新旧色々な情報が混在しています。ざっくり知りたい人向けから、フレームワーク解説の良書やしっかりしたセキュリティの本までピックアップしてみます。 とにかくとりあえずどんなもんか知りたい 自分はプログラマになる気はな
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定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
【初心者向け】WEBクリエイターになるための入門7レッスン | DECONCEPTER
無料で学べるドットインストール 無料でプログラミングの基礎を簡単に動画で学習できるドットインストールというサイトをご存知でしょうか。こちらのサイトではHTMLやCSSといったWEBページを作るための基礎知識やWEBシステムやWEBページのデザインをするためのプログラミング言語の解説が幅広く網羅されているサイトだ。 初心者でなくても、新しい言語を気軽に学べるようになっており、WEB技術の学習に対する敷居を大きく下げてくれている。今日はこれからWEBページを作りたいという方やWEBディレクターをやっているが作り方を実はよく知らないという方が最低限押さえておきたいレッスンをピックアップする。 HTML これが書けなきゃ始まらない。HTMLは全く難しいものではありません。整形した文書をWordで作ったことがある方は多いと思うが、HTMLはインターネットに整形した文書を公開するための言語だ。 WEB
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の定義が呼び出されて表示される。奇跡だ。 なぜこの機能を今まで他のエ
IT系奥様必見！プログラマのダンナにしてはいけない７つの掟 | DECONCEPTER
1. パソコンに向かっているときに話しかけてはいけない プログラマの夫を持ったからには簡単にオフラインで話せると考えてはいけない。もし話しかけたかったらメールもしくはFacebookでメッセージを送ろう。 たった一言「ちょっとだけこっち向いてほしいな」と送るだけで円滑コミュニケーションを伴った円満夫婦生活の始まりだ。 2. SNSを見てるからと言って休憩していると思ってはいけない もしあなたのダンナがWEBに携わるプログラマなら、SNSを見るのは仕事のうちと考えていると思って間違いありません。 実際にFacebookページの制作やTwitterを絡めたサイトの制作を仕事で請け負っている可能性もあります。 必ず1のルールを忘れてはいけません。 3. ダンナが食事中にiPhoneを見てるからといって不満を言ってはいけない あなたの夫は情報に追われています。本人は追っているつもりかも知れませんが
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のサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
あなたはいくつ当てはまる？デキるWEBディレクター7つの特徴 | DECONCEPTER
WEBディレクターは平均点の高いゼネラリストである WEBクリエイティブのディレクションという仕事の範囲は多岐に渡る。提案段階では見積もりの依頼対応から、要件にあった技術とデザイン、実現可能なWBSの作成、運用フローの策定などプロデューサーと相談しながらプロジェクトの骨子を決める役割がある。 プロジェクトがスタートすれば常に進捗管理に目を配り、クライアントの追加要望に対する調整業務も発生する。上がってきた制作物にしっかりと目を通してクオリティーをコントロールをして、成果物というゴールに向けて走り続ける仕事である。 こんな広範囲の仕事をこなすには経験と日頃の姿勢が重要になってくる。デキルWEBディレクターはどんな特徴を持っているのか考えてみようと思う。 1. 作ることが好き WEBクリエイティブの現場はものすごい数のタスクにあふれています。一つ一つが深く重く、何かわからないことがある度に人に
爆速エディタSublime Text 2ショートカット一覧 | DECONCEPTER
まずはSublime Text 2の無敵たる所以の3つのショートカット コマンドパレットを表示 コマンドパレットはシンタックスの切り替えや、スニペットの呼び出しなどここが全ての起点になると言っても過言ではありません。パッケージコントロールをインストールすれば、様々なプラグインがここを基点にインストール管理ができます。 Cmd + Shift + P 同じ文字列を一括選択・編集（１つずつ） これもSublime Text 2の特徴的な機能の一つ。通常の検索置換とは全く違った体験が得られます。まずは何も言わず試してください。 Cmd + D 同じ文字列を一括選択・編集 有無をいわさず検索対象文字列を選択して一括編集モードにしてくれます。急いでコードを書いているときに重宝しすぎてありあまる感激機能。 Cmd + Ctrl + G 普通に便利系 指定行に移動 Ctrl + G 行をコメントアウト（
知らない人は遅れてる？新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冊が理解できれば後は作りまくる
なぜ次々とJavaScriptコンパイラが生まれるのか。 — DECONCEPTER
最もJavaScriptに近いJavaScriptコンパイラ 先日MicrosoftからTypeScriptというJavaScriptコンパイラが公開されました。ファーストインプレッションとしては今までのJavaScriptコンパイラと比べると若干敷居が低く感じます。まず驚いたのはドキュメントがWordファイルだったこと。早速ダウンロードしてみたら一部文字化けしていました。さすが。PDFも用意されていたのでかろうじてドキュメントを読めました。Webページで用意して欲しい。 JavaScriptの記法そのままに型付けができる TypeScriptでまず好印象なのがJavaScriptのコードをそのまま書いてもコンパイルされるところ。又、「Type」ScriptというだけあってさらにJavaScriptの記法に型を付けられる。例えばstringと指定すればstringのプロパティをシンタックス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
