デザイン×テクノロジーで新しいサイトを創り続けるLETTERS.INCの制作物から心地よいアニメーションを学んでみるVol.1 – T2
デザイン×テクノロジーで新しいサイトを創り続けるLETTERS.INCの制作物から心地よいアニメーションを学んでみるVol.1 10月 7, 2015 tanamako 読了: 約 2 分 最近様々なサイトで、デザインとテクノロジーの掛け算が素晴らしい『Letters.inc』が制作したサイトが取り上げられている。心地よいアニメーションと綺麗・シンプルでありながらも印象に残るデザインが特徴的だ。平凡な二次元的なデザインやインタラクションではなく、見るものを惹き付ける心地よいアニメーションの裏側はどのように創られているのか一部アニメーションのソースを見ながら学んでみる。 こういう発想があったのかという手紙のアニメーション 今回アニメーションの参考にしたサイトはこちら。 http://amp-music.net/about/howtobuy/ AMP MUSICというチームにミュージシャンが所
Webサービス：HTMLとCSSを自動生成してくれるサービスのメンテナンスコスト – T2
Webサービス：HTMLとCSSを自動生成してくれるサービスのメンテナンスコスト 5月 17, 2015 tanamako 読了: 約 4 分 先日adobe museの記事を書いたところ、幾人かの方からメンテナンスコストはどうなのかというツイートがあったので、adobe museではないですが、他のサービスを試してみて、それを生かして受託開発をしてみたのでその時の感想。 目次 ・誰もが夢見る自動コーディング ・adobe museにふれる ・某自動コーディングサービスにふれる ・運用や納品等含めた受託的な側面 ・作って納品するだけのサイトでの利用 誰もが夢見る自動コーディング 数年前からコーディングの自動化が叫ばれ、もしくは中国など海外に外注して 安価でクオリティはそこそこのコーディングをしてもらうということが言われています。 日本人やある程度技術力のあるリーダーを置いてマネジメントしな
【JavaScript】JavaScriptをテストするために必要な事まとめ – T2
はじめに 意図としては、現在マークアップエンジニアでSassと少しJSを触っているわけですが、メインのJSerとの作業分担が難しいと感じている今日このごろ。 単純なマークアップだけなのか、動的に変化するコンテンツの実装なのか、JSの方は得意だけど、CSSがあまり得意でない人との協業の時に 動的コンテンツのデザインのためにCSSをいじるとき理解が少ない人だとiPhoneとandroidで見え方が違ったり、バグを生んだりするわけなので、 コミュニケーションだけでなくしっかりとしたテストの必要性を感じつつメモ JSのフレームワーク系 「フロントエンドJavaScript開発におけるテスト駆動開発のススメと自動テストフレームワーク利用の勘所」という勉強会に行ってきた。 JsUnit を使った JavaScript のユニットテスト JavaScript のユニット・テストを効率よく行う さまざまな
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) – T2
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) 3月 13, 2013 admin 読了: 約 24 分 フロントの技術について英語の記事をシェアされていて、気になったので理解を深めるために翻訳してみました。 英語の記事では、28から始まるのですがややこしいので、1はHTMLからはじめていきたいと思います。 DANGER!!!WARNING!!!はじめに 元記事はこちら ※間違った意図や誤訳をしている箇所が多々あると思いますが、その点ご了承くださいませ…。 初めてということでしょっぱい訳で、すみません…。 1. avoid inline code / インラインコードを避ける 1. <style></style> や <script></script> をHTMLに直接書く 2. <link rel="stylesheet" href="" />
SourceMapを使って、効率の良いJavaScript開発生活/mixi Engineers' JS Advent Calendar 2012
【追記】 「mixiページ」サービス終了に向けてのスケジュールは、2020年8月31日に全てサービス提供終了としていましたが、以下の日程に変更します。 ・2020年9月7日11時頃 モバイル版mixiページ終了 ・2020年9月14日11時頃 PC版、スマートフォン版mixiページ終了 終了時刻は前後する場合がございます。 ダウンロード機能はPC版スマートフォン版mixiページ終了と同時の2020年9月14日11時頃に終了いたしますので、「mixiページ」データのダウンロードをご希望の方は、お早めにダウンロードをお願いします。 以上、どうぞよろしくお願いいたします。 【追記】 終了予定の「mixiページ」とは、SNSmixi全体の中の一部特定サービスの名称でございます。 SNSmixiの全てが終了するわけではございません。2020年8月31日以降も引き続きSNSmixiはご利用いただけます
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ – T2
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ 11月 18, 2012 admin 導入はめちゃくちゃ簡単 下記記事でインストールまで簡単に。 直近だと下の2つ見ておけば大体おｋ Permalink to Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ [Event][SublimeText]第0回 Sublime Text 2 勉強会 で Emmet について話してきた ダウンロード Dev Builds 初期設定等は上記記事にある設定をリスペクトしました笑 Packageのインストール Sublime TextはHTML5等パッケージをインストールする事で使えるようになります。 Dreamweaverではファイルを新規作成時、H
HTML5 SVGで作るシューティングゲーム (1/6)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御する方法を紹介しました。今回はJavaScriptとSVGを使ってシューティングゲームを作成します。 SVGアニメーション ゲームの作成に入る前に、SVG図形をアニメーションさせる方法を説明します。SVGには図形の位置やサイズをアニメーションさせる<anime>タグが用意されています。<anime>を使うとアニメーションが簡単に実現できます。 SVGアニメーションはアニメーションさせたい図形の子ノードに<anime>タグを記述し、変化させる属性値を指定します。指定できる主な属性名を以下の表に示します。
HTML5関連の情報源のまとめ（2012年4月版）
こんにちわ。HTMLファイ部のふちがみです。 HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。 ソーシャルブックマーク キーワード「HTML5」を含む新着エントリー - はてなブックマーク キーワード「CSS」を含む新着エントリー - はてなブックマーク キーワード「javascript」を含む新着エントリー - はてなブックマーク コミュニティー html5j.org | Google グループ ニュースサイト HTML5/CSS3の情報をクリップ！ :: dotHTML5 dotHTML5のtwitterもフォローしておくとGOOD ゲーム・ガジェット系 Kotaku JAPAN｜ザ・ゲーム情報
初心者によるFacebookアプリ開発 -JavaScript編1 – T2
読了: 約 0 分 今日も雪が降りましたね。東京に住んで5年目ですが、こんなに降ったのは初めてです。 寒くて家に籠っていたので、何か作りたいなーと思って参考書を片手にFacebookアプリを作ってみました。 ※途中段階ですので挙動はおかしいですが、どうかご勘弁下さい。 Facebookアプリってなんぞ 最近は診断系アプリが良く使われていて、スパムのようになったりするアプリも増えて来ていますよね。 制作会社にいる身+営業的な視点から考えると、この手のアプリは提案によってはかなりニーズがあると思います。 最近変わりましたが、Facebookページと同梱プランで提案なんて事も出来ますね。 キャンバスアプリ(App on Facebook) iframe内に外部サイトのアプリのHTMLファイル等を読みこむ方法です。 WEBサイトのURLを指定しておけば、WEBサイトと同じCSS/JavaScrip
HTMLに恋したい！「コーディング推薦」はじめました！
好きなプロパティは「-webkit-animation-delay」の渕上です。 昨年、卒制採用にのっかって行った「コーディング推薦」。今年もやることになりました！ コーディング推薦って？ KAYACの採用キャンペーンの一つです。 コーディング推薦用の課題にHTML・CSS・JavaScriptで回答していただき、弊社のHTMLファイ部のメンバーが「キュン」としたコードを書いた方を全力で推薦します！就活よりも卒業制作よりもコーディングを頑張ってしまった学生さん、履歴書よりもHTMLを書いていたい求職中のコーダーさんにぜひオススメしたいキャンペーンです！！ 課題 以下の原稿をあなたらしくマークアップ・装飾してください！ HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS 「写真袋」というiPhoneアプリのランディ
JavaScript/jQueryの勉強 ～初級編～ – T2
読了: 約 3 分 JavaScriptを勉強する中で勉強になったorこれから勉強するためにブックマーク的に 記事を書いておきます。 最近は更にHTML5とCSS3が普及してきて、スマートフォンのサイト制作の業務が増えていますね。 JavaScriptと組み合わせることでリッチなコンテンツを創る事が出来るので、 ここまできたのかーとワクワクします。 そんな事を考えていますが、まだJavaScript初心者。 最初に覚えておくべき記事をまとめておきます。 JavaScript編 オブジェクト指向やprototypeなど勉強している方にお勧めの記事です。 プロトタイプ（prototype）によるJavaScriptのオブジェクト指向 Javascript初心者からみたprototype Javascript/prototypeプロパティ 第1回 Prototypeライブラリ jQuery編 j
LocalStorageがおもいのほか便利すぎたのでまとめ - それマグで！
localStorageを使って見た．食わず嫌いでした．すごく便利ですね cookieで保存するより相当便利です． cookie VS localstorage 比較 Cookieの特長 ドメイン毎にデータが保存される．(SameOriginの原則) Stringが保存される． HTTPリクエストで毎回サーバーに送られる JavaScriptからアクセス可能 有効期限がある LocalStorageの特長 ドメイン毎にデータが保存される．(SameOriginの原則) Stringが保存される． HTTPリクエストで毎回サーバーに送られない JavaScriptからアクセス可能 有効期限が特にない 比較まとめ Cookieの特質から、HTTP通信で送る特性を省いたものHTTP通信で送る必要がないので，Expires（期限）も省略される localStorageの保存方法 js> local
HTML5のlocalStorageでiPhone用Webアプリを高速化
HTML5のlocalStorageでiPhone用Webアプリを高速化：iPhoneで動かす業務用Webアプリ開発入門（4）（1/2 ページ） 今回は、iOSのSafariの中にデータを記録できる、HTML5の「localStorage」機能を使って、データの先読みとキャッシュを実現しアプリケーションの体感パフォーマンスを向上させてみます。 HTML5の「localStorage」とは localStorage（ローカルストレージ）とは、HTML5で規定されている、Webブラウザ内部のKVS（キーバリュー型データストア）です。iOSのSafariでも実装されていて、JavaScriptコードからアクセスでき、任意のデータを保存できます。 いきなり注意！ localStorageの保存データはテキストで！ HTML5の仕様では、localStorageに保存できるデータはJavaScrip
スマホ最適化、スマートフォン制作に関するメモ – T2
1．デバイス依存をどう乗り切るか。 エクスぺリア、iPhone、ギャラクシーはこれといった影響なくできていたのですが、 REGZAでFirefoxなどを使った時はもうね。泣きそうになりましたよね。 原因はmoz系に対応するjsとCSS3の記述を全て行っていなかった事だと思います。 初めにどのデバイスでどこまで対応するのかという仕様策定をしてから始めないと モバイル同様苦しむ事になるので注意が必要です。 androidのopera等。 2．横にした時の見え方。 これは意外と苦戦しました。縦だと綺麗なのにスマホサイトでよく見るwidth:100%とかを 適所に使わないといけない。 float:left; とかで2つの要素を詰めないと、縦では詰まっていたのに、横では両端に広がってしまうとか。 それによってhtmlの記述を変えないといけなくなったりとか。 2012/09/26 以前は上記の様に書い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -
iPhone/Android用HTML5ウェブアプリ向けの軽量JSフレームワーク「jQ.Mobi」
stroll.js - CSS3 Scroll Effects
TechCrunch | Startup and Technology News
HTML909
IDEA * IDEA