=========== ※2012年に書いたものを移植。 styleタグをDOMに追加すると、そのたび全要素レンダリングが発生するので実用的ではない。 DOMにCSS追加用のAPIが用意されているのでそれを使いましょう。 参考 mozilla::insertRule サンプル フロー スクリプト操作用のstyle要素を生成し、headに入れておく
あちこちでお目にかかる水平型の多階層ナビゲーションで、子階層を表示する時のアニメーションのさまざまなバリエーションを紹介します。 通常時の見た目は同じですが、一手間加えてあると「おっ!」ってなりますよね。 Animated Navigation Examples ベースのHTMLは、非常にシンプルです。 HTML ナビゲーションの各アイテムはリストで実装し、nav要素で内包します。 <nav class="nav"> <ul> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> <li> ... ... </ul> </nav>
すべての Microsoft 製品 Global Microsoft 365 Teams Copilot Windows Surface Xbox セール 法人向け サポート ソフトウェア Windows アプリ AI OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox Live Gold Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Cloud Microsoft Security Azure Dynamics 365 一般法人向け Microsoft 365 Microsoft Industry Microsoft Power Platform W
Meteorとは? Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。 node.jsをベースとしたフルスタックフレームワークで、サーバサイドの処理も、データベース処理も、クライアントと同様に全てjavascriptで書くことができます。 大体、こうしたものは、お作法覚えるまでが大変で初心者泣かせだったりするのですが、Meteorは 初心者に鬼フォーカスしてる 点が特徴だと思っています。 はじめるには? 2014.12.19更新 本家Tutorial Meteor 1.0のリリースに伴いチュートリアルサイトもできました! 英語ですが、こちらを進めるのが良いと思います。 リアルタイムWebアプリケーションフレームワークMeteorについて 良記事です! Meteorを勉強するモチベーションが高まるとおもいます。 フルスタックJSフレームワークMeteorのメリット&
ちょっとしたときにCSS3アニメーションを使いたいシーンって多々あると思うのですが、Compass使っていても効果を想像しながら書くのはダルイときが多々あると思います。そんなときはAnimate Mixin for Compass/SASSを使うと、もっと楽ができそうです。 使い方 こちらのサイトから_animate.sassをダウンロードして@import animateするだけです。 どんなエフェクトがあるのかはサイトに一覧があります。ボタンをクリックすると右のオブジェクトがアニメーションするので、効果を確認しやすいですね。 CSS3アニメーションはPC向けサイトではIE対応なんぞがあってとても使いづらいですが、スマホ向けならかなり効果的に使うことができると思います。ちょっとしたアニメーションがあるとそれっぽくなるシーンが多々ありますし、効果的に使っていきたいですね。 Animate
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 メモリリーク。一言でプログラマを死に追いやる恐怖の言葉。C/C++の世界ではmallocしたのにfreeしないとかのケアレスミスでよく起きていた問題です。その後、ガベージコレクタが掃除してくれるプログラミング言語が増え、一部の言語で循環参照に気をつけるぐらいであまり気にしなくても良い的な風潮になっています。 というものの、そうとも言ってられなくない状況も増えてきています。クラウドのスケールアウトブームも一段落というかコモディティ化し、go言語で再び性能向上方面に関心が寄せられたり、日本でErlangの勉強会が満席になったり、スケールアウトから再びスケールアップ方面に話題が移りつつあるのを感じます。長時間稼働のサーバで、スケールアップしてさらに数多くのリクエストを大量に受けるよう
JavaScriptプログラミングのTOPへ 今から3分で,HTML5の JavaScript API の使い方を2つ覚えよう。 1:ドラッグ&ドロップAPI 画面上の要素を。 画面外から。 2:File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで,これらの実装の方法を素早く学習する。 ※サンプルは,IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では,ここから3分の時間のカウントを開始。集中して読もう。 (0:00〜前半の1分半) 画面内でのドラッグ・ドロップ (後半の1:30〜3:00) 画面外からのドラッグ・ドロップ 参考資料 (0:00〜前半の1分半)画面内でのドラッグ・ドロップ まず,動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル1 ht
With Microsoft ending Windows XP support this month, we’re giving the jQuery community some long-lead-time notice on changes to browser support. First of all, don’t panic! Nothing is really changing with respect to the browsers that can run jQuery for at least six more months. Our goal is to let everyone in the web development community know what the jQuery team intends to do over the next year, s
Promise API Overview Constructor var promise = new Promise(function(resolve, reject) { /* (非同期)処理 */ }); Instance Method promise.then(onFulfilled, onRejected); promise.catch(onRejected); Static Method Promise.all() 、 Promise.resolve() などの便利メソッド系 Promiseのキホン的な流れ function asyncFunction() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('Async Hello world'); }, 16);
JavaScriptプログラミングのTOPへ HTML5の「Web Workers API」(非同期処理の仕組み)を,外部スクリプトを使わずに,1ファイルだけで実行するサンプルコード。 ワンライナーで(たった1行で)Workerスレッドを起動できる。 簡単に書くとこんな感じ。 // スレッド内容を別ファイルに分離しなくてよい new Worker( window.URL.createObjectURL( new Blob([ elem.innerHTML ],{type:"text/javascript"}) ) ); 以下は解説。 Web Workers APIは,JavaScriptでマルチスレッド・プログラミングをするための仕組み。 正確に言えば,UIとは別に裏側で,重い処理を非同期で実行してくれるAPI。 Workerというオブジェクトに「外部スクリプト・ファイルのURL」を渡せば
setting git diff/git mergeはツールの使用を推奨。ツールの設定を行い、下記のコマンドで実行する。 diff : git difftool -y --dir-diff merge : git mergetool -y difftool/mergetoolの設定 git config --global merge.tool vimdiff 標準ではkdiff3、tkdiff、meld、xxdiff、emerge、vimdiff、gvimdiff、ecmerge、opendiffが使用可能。 WinMergeはないのか、という場合こちら参照。 推奨されているP4Mergeの設定はこちら WinMerge2.14.0.37では下記の設定で意図通り動作することを確認。 [diff] tool = WinMerge guitool = WinMerge [difftool] k
Re: Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか? Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか? - @kyanny’s blog わたくしの場合はMarionette.jsのControllerを使う、となる。 どうか「新しいフレームワークの話なら結構です」とか思わないで。結構便利なんですよコレ。 How To Use ブログ記事の編集画面だけやたらにリッチクライアントなパターンを考えましょう。 なお、Rails x Backbone.js ということで、Assets Pipelineを使う前提です。 ここで考えるのは、awesomeblog.com/articles/123/editのときだけBackbone化したいパ
TOPICS Web , JavaScript 発行年月日 2014年04月 PRINT LENGTH 220 ISBN 978-4-87311-667-9 原書 AngularJS FORMAT PDF EPUB Web開発者にいま最も支持されているJavaScript MVCフレームワーク「AngularJS」の解説書。定型的な単純作業が繰り返されがちなWeb開発をよりシンプルで楽しいものにしようというのがAngularJSの試みです。本書ではまずAngularJSアプリケーションの構成要素を押さえた上で、AngularJSアプリケーションの開発、テスト、実行手順を解説します。サーバ通信のAPIや考慮するべき点、ディレクティブの仕組みについて解説し、最後にAngularJSのさまざまな活用例を紹介します。GoogleがサポートするAngularJSには、開発メンバーがGoogleのメー
$(selector).on('click', function(event) { }); くらいしか使ってこなかったのだけど、調べてみたらもっと便利に使える事を知ったのでメモ。多分on()だけじゃなくone()も同じかな。 イベントにネームスペースを付けられる $(selector).on('click.add-button', function(event) { }); $(selector).on('click.remove-button', function(event) { }); // click.remove-buttonだけ削除される $(selector).off('click.remove-button');
Sailsとは Sailsは米国オースティンにあるBalderdash社のMike McNeilさんを中心として作成されているMVCフレームワークです。スタイルとしてはRailsに近い形を取りつつ、最近のWebアプリ開発に向けたいくつかの特徴を持っています。 主な特徴としては Web APIを簡単に作成し、公開できる リアルタイムWebなアプリケーションが簡単に作成できる Single Page SiteやMobileなどの多様なフロントエンドに対応できる といったようなものが挙げられます。 Web APIについてはJSONベースのRESTfulなAPIが簡単に作れるようになっています(Sails API blueprints)。特にAPIを作るという意識をせずとも、generatorによって単純なCRUDならすぐにAPIとして公開することができます。ルーティングについても、この手のフレー
JetBrainsの Web開発 IDE*1、WebStorm 8.0がリリースされました。 WebStromもTypeScriptに対応しているという話は聞いていたのですが、WebStrom自体をほとんど使ったことがありませんでした。 先日8.0がリリースされたとのことなので、せっかくなので、手探り状態ですが少し試してみました。 WebStormの入手とセットアップ WebStormは有償の製品ですが、30日間の試用ができます。 試したい方は以下から自分のプラットホーム向けのものをダウンロードしてセットアップしましょう。Win/Mac/Linux用があります。 http://www.jetbrains.com/webstorm/ (なお、ライセンスを購入される場合はサムライズムさんが正規代理店として取り扱っておられますので、こちらを参照のこと。WebStormはJetBrains製品の中
某プラットフォームのiOSの音声がならずいろいろ試行錯誤してみた結果 この方法でなるようになったので一応備忘録 処理のフロー的にはこんな 1,ページが開かれる 2,対象の音声をロード 3,Web Audio APIが使用できるかのチェック ※iOS6から使用が可能 4,XMLHttpRequestでmp3ファイルをバイナリで持ってくる 5,デコード 6,「再生」ボタンを押す 7,ロードしてる音声ファイルを流す という流れになります。 sound.js $(document).ready(function() { /** * @component */ var context; var sound_buffer = null; //onLoad window.addEventListener('load', init, false); /** * 初期化 * **/ function ini
サイト高速化をネタにした記事は星の数ほどありますし、YSlow や PageSpeed、あるいは両方同時にチェックできる GTmetrix のおかげで、アドバイスに従って問題点を一つ一つ潰し込んでいけば、着実にスコアを「Grade A」に近づけられるようになりました。 またベスト・プラクティスなんて知らなくても、「CloudFlare 導入、一発 OK!」なんていうお手軽なサービスもあります。 一方、これら個々の Tips、テクニックを断片的に積み上げていくアプローチやブラックボックス方式では、サイト全体を通して「本当に最適なの?」という疑問も生じます。 別な言い方をすれば、「Grade A は取ったけど… その先は?」に対する処方箋が必要なんじゃないかと思っています。 そこで今回は、「スコア」だけでは見えてこない、サイト高速化の「戦略」と「戦術」の話にチャレンジしてみたいと思います。これ
各サイトに埋め込めるタグなどを配布側として開発する場合の注意です。 (例:Tweet Feed) おもにiframeまわりの話となります 埋め込みスクリプト 以下みたいなのを各サイトに埋め込んでもらう前提です。 <div id ='hoge'></div> <script type="text/javascript"> (function() { var js = document.createElement('script'){ js.async = true; js.src = '//yourOrigin/hoge.js'; document.getElementsByTagName('head')[0].appendChild(js); })(); </script> 要するに、各サイトに//yourOrigin/hoge.js を読み込んでもらいます。 hoge.js は$('#h
【他キーワード】 第一級関数(高階関数が扱える) カリー化(部分適用) 型推論 気をつけるべきは三点 JavaScriptで関数型を考えるにあたっては、 抑えるべきポイントは下記三点となります。 すべての関数が値を返す 関数に副作用がない(参照透過) 関数を値として扱える 関数型として気をつけることはほかにもあるのですが、 入門として今回は扱いません。 すべての関数が値を返す 関数がすべての値を返すようにします。 // Good function hello() { return 'Hello' } console.log(hello()); // Hello // Bad function hello() { console.log('Hello'); } hello();// Hello これによりその返り値を利用し、さらに関数を組み立てていきます。 関数に副作用がない(参照透過) 簡
これだけ色々出てくるとどれを使おうか迷ってしまいますね! UIkitはHTML5向けのフロントエンドフレームワークです。いわゆるBootstrapやFoundationと同じようにWebインタフェースを手軽に作れるようにしてくれるフレームワークです。Bootstrap臭を嫌う方はチェックしてみてはいかがでしょう。 UIkitのスクリーンショット 今回はとにかくスクリーンショット満載です。隅々まで見て、自分のニーズにマッチしているか確認してください。まずは様々な部品を組み合わせたレイアウト例から。 トップページ風デザイン。 画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。 ポートフォリオ風。 マウスオーバーで拡大するための虫眼鏡表示。 モーダルもあります。 ブログ風。 ドキュメント表示。 コンタクトやチームメンバーの表示。このレイアウトいいですね! フォーム付き。もちろんメンバ
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、DETOXでデザイナーをしているSonokoと申します。 今回はDETOXで用いたフラットデザインについてお話したいと思います。 DETOXとは DETOXとは言いたいことも言えないこんな世の中で、ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNSです。 「SNS疲れ」などで溜まった現代のココロの闇を「ポイズン」として吐き出せます:) DETOXでは、iOS 7の普及に伴いフラットデザインを搭載しました。 トレンドの「フラットデザイン」ってなに?まずはどんなものか、百聞は一見にしかず
2013年に爆発的に流行った Vagrant は非常に便利なツールで使ってる人にとっては無くてはならない存在になっています。 また、最近既にバズワード感のある「Immutable Infrastructure」では「VagrantにDockerを入れて。。」などと知ってる前提で話が進んでいきます。 一方でそもそも Vagrant ってなに?って声もちらほら聞くので、今回は再入門ということで簡単に紹介したいと思います。 Vagrant ってそもそも何? Vagrant (ベイグラント) とはMitchell Hashimoto(ミッチェル ハシモト)氏が開発したRuby製スクリプトで仮想マシンをCUIから簡単に操作できるツールです。 Vagrant のどこが便利なの? Vagrant を利用すると下記のようなメリットが挙げられます。 ・プロジェクト毎に開発環境を分けることが出来る。 ・開発環
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く