調理法で高カロリーにも低カロリーにもなる事実
同じ食材も調理法によってカロリーを大きく変えることができます。 例えば魚の調理法には刺身のほか焼きや煮付、揚物などがありますが、同じ魚でもそれぞれカロリーが大きく変化することがわかっています。 例えば脂身たっぷりのブリを50〜70gほど使う場合、刺身なら135kcal程度、塩焼きなら204kcal程度なのに対し、照焼きは232kcal程度にまで数値が上がります。 煮付は味付けにもよりますが、しょうゆなら208kcal程度、南蛮漬けなら252kcal程度になります。 つまり、刺身が一番カロリーが低く、場合によっては刺身の倍近いカロリーになってしまうことがわかります。 基本は糖分や油分をなるべく控えめにすることが低カロリー化につながりますが、部位や種類を選ぶことも大切です。 肉なら牛よりも豚や鶏を選び、部位もロースより赤身の多いももなどを選ぶと良いでしょう。 ダイエット中のアスリートが鶏のささ
JavaScriptのnewって本当にいらない子？ - あと味
先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか？だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
Twine – ストーリーを整理するノートアプリ
プレゼンテーションは単純にスライドを並べてたんたんと説明していけば良いわけではありません。全体を通して一つのストーリーが必要です。ストーリーが一貫して提供されてこそ、聞き手は納得し、理解を深めることができます。 そんな納得感あるストーリーを作るのに適したソフトウェアがTwineです。Wikiっぽさのある面白いソフトウェアです。 Twineの使い方 Twineは元々Windows、Mac OSX用のソフトウェアでしたが、2.0からWebベースになったようです。プレゼンテーションのスライドや小説、マインドマップの代わりに使うのも良さそうです。 TwineはHTML5/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Twine / An open-source tool for telling interactive, nonlinear stories tweeco
JavaScript Hand Tracking·HTML5/JavaScriptによる手の認識ライブラリ MOONGIFT
CV（コンピュータビジョン）はここ数年でどんどん盛り上がっています。2Dもあれば3Dによる認識もあります。認識精度があがることで、様々なアプリケーション、サービスが生まれてくるでしょう。 まるで映画の中のコンピュータのような世界ができるかも知れません。それをWeb上で手軽に体感できるのがJavaScript Hand Trackingです。 JavaScript Hand Trackingの使い方 こちらがデモです。手の部分が赤い線で認識しています。 動かしても認識が追従しています。 動画によるデモ。手の形を変えても認識しているのが分かるでしょうか。 JavaScript Hand TrackingはWebカメラだけで手軽に手の認識技術が試せ、遊ぶことができます。肌の色は設定で認識幅を調整できるようになっています。 JavaScript Hand TrackingはHTML5/JavaSc
最高のマウスストーカーを作った - hitode909の日記
だいぶ前のはてなインターンの講義で，JavaScriptの講義をしたのだけど，そのときの課題で，マウスストーカーを作る，というのを出題した． 教科書は公開されていて，課題はこのへん． https://github.com/hatena/Hatena-Textbook/blob/public2014/javascript-event-driven.md#課題2 インターン生たちがいろんなおもしろマウスストーカーを作ってくれて，おもしろかったのだけど，せっかく出題したので，僕も作ってみた． このページでも有効になってるので，マウスのボタンを押してみてください．ご迷惑おかけします． http://mouse-stalkers.github.io/the-best-stalker-ever/ こういうファンシーな見た目． GIFだと見ずらいけど，☆が飛んでくるっていうマウスストーカー．マウスダウン
HTML5 Canvasで動くジェネラティブ・アートをブログに貼る - roombaの日記
「ジェネラティブ・アート」 最近『ジェネラティブ・アート』という本を買いました。ジェネラティブ・アート(Generative Art)とは、通常のアート作品のように人間が描いたりつくったりするのではなく、何らかのアルゴリズムやランダム性を利用して生成的につくられるものを言います。ちょっとしたプログラムでアートができるので、絵心が不要なのが魅力です。 下のように画像検索すると、かっこいいものがいくつもでてきます。 generative art - Google 検索 HTML5 Canvasで描いた絵をブログに貼り付ける方法 本を読んだら実際に製作してこのブログに貼り付けたいので、お絵描き方法としてはHTML5 Canvas + Javascriptを使うことにし、貼り付け方を調べてみました。本ではProcessingという言語を使っているのですが、Javascriptの方が好みなので。 試
3Dカルーセルが実装できる「Carousel-3d」:phpspot開発日誌
Carousel-3d 3Dカルーセルが実装できる「Carousel-3d」。 次のように平面ではなく立体的に画像を回転させるスクリプトです。IE8,9にも頑張って対応しているようです。 関連エントリ レスポンシブデザインにも対応した多機能カルーセル実装jQueryプラグイン「slick」
JavaScriptでURLを書き換える方法
pushStateの3つ目の引数の値にURLが書き換わる。スラッシュから始まる文字列を与えると動作が変わる点に注意。 # http://example.com/abc/123 にいる時 # これを実行すると、 window.history.pushState(null, null, "url_desu"); # こうなる http://example.com/abc/url_desu # これを実行すると、 window.history.pushState(null, null, "/url_desu"); # こうなる http://example.com/url_desu
Polylion | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Dennis Gaebel. Dennis created some pretty captivating polygon SVG effects on CodePen, and here he’ll share how he did it. Sometimes the things you least expect, gain the most attention as the case was with the Polylion I posted on CodePen. I figured the simpl
ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
Blockrain.js - a Tetris game in HTML5 + Javascript
Embed & play the classic game on your site. Simple as that. Plug 'n' Play Just copy and paste a bit of code and you'll be good to go Responsive No matter how wide or narrow your display is, you'll always be able to play. Design Customize it as you want. Change the colors to fit your site. Speed Adjust how fast the blocks are falling to make it more difficult. Score Add the scoreboard or not. That'
ふしぎな動き！JavaScript+HTML5で50行で『ラングトンのアリ』を作ろう - コードレシピ
ラングトンのアリについて ラングトンのアリを知っていますか？ラングトンのアリは以下の単純なルールに従って動くアリのことです。 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、1マス前進する。 たったこれだけのルールでラングトンのアリさんはとても複雑な動きを見せ、まるで生きているかのようです。そしてこの複雑な動きを大体1万回繰り返すとなぜか一直線の道を作ってどっかにいってしまいます。 詳しくはデモを見てください。 今回はこれをJavaScriptで作っていきます。 今回作るラングトンのアリの動作の流れ 書く前にどんなものか少し考えてみましょう。 アリの場所のマスの色によってアリの向きの変更 アリの場所のマスの色を反転 アリを一マス進める 1へ。 めちゃめちゃシンプルですね。では早
Beautiful JavaScript
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. JavaScript is arguably the most polarizing and misunderstood programming language in the world. Many have attempted to replace it as the language of the Web, but JavaScript has survive
Javascriptの仕様で「オブジェクトは共有渡しで、プリミティブ値は値渡し」と区別しているのか
JavaScriptの参照に関する記事でよく、オブジェクトは共有渡しで、プリミティブ値は値渡しと書かれていますが、仕様書をみても当該の記述を見つけられません。 仕様書を読む限り区別がない、つまり全てが値渡しの様に見えてしまいます。 もしくはReference型にbaseとして格納されているのは値を構成するデータ配列ではなく、値の存在そのもの、つまり参照（ポインタ）に近い概念であって、結局実は全部が共有渡しということなのでしょうか？ 例えばProperty Accessorsの仕様で 「Return a value of type Reference whose base value is bv」 というのは、作成されるReferenceのbaseにbvそのものを格納する→bvをデータとして複製して格納ではなく、その存在そのものを格納→実際は参照（ポインタ）に当たるものが格納されるイメージ、
私のJavaScript情報の集め方 - Qiita
ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い！というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
Front-end Tooling Workflows
~ 198 slides on tools to help you stay productive on the front-end.
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ - かちびと.net
jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ) Sample 基
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Acid Machine Beta
