DEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%

はじめに スプライトアニメーションとは、コマを画像一枚に敷き詰め、画像内での座標位置を連続で切り替えることで、アニメーションを実現させる手法です。 特にここ数年でどーんと色々なWebサイトで使われるようになっている気がします。私はあまり詳しくはありませんが、ゲーム制作とかでは昔から一般的な手法だったのかもしれません（RPGツクールとかでスプライト画像を見た気もします）。 そんなに難しいものでもなく、アイデア次第では美しく非常にインパクトのある表現も可能です。ここでは動作の基本をまとめてみます。試したことの無い方の参考になれば幸いです。 目次 アニメーションイメージ スプライトアニメーションのメリット・デメリット cssだけで表現してみる cssとjavascriptで表現してみる canvasで表現してみる アニメーションイメージ [ソース画像] [アニメーション] ※途中でガクッとなるの

2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「

【初心者のイフト入門】IFTTTの使い方とレシピの作り方を徹底解説！WEB作業を効率化しよう！！ 2018 1/30 初めましての皆様もいつも見てくれる皆様もこんにちは。しむです。 こちらのページに興味をもってくれた皆様は、恐らく何かしらのWEBサービスを利用している事かと思います。 Evernote, Twitter, Facebook, Instagram, Feedly, Pocket, Dropbox・・・ざっと思いつくだけでもこれだけのWEBサービスがあります。これらのWEBサービスをひとつも使っていない人は少ないのではないでしょうか。 ひとつでも使っている貴方に向けて言いますが、IFTTTを使いましょう。WEB作業が本当に捗りますよ。 「IFTTT」とは 使い方の前に「IFTTT（イフト）」について少しだけ説明。 任意のWEBサービスまたはスマホでの作業をトリガーにして、他のW

インタラクティブコンテンツ制作に役立つHTML5向けのフレームワークCreateJS (使い方は入門サイトを参照ください)。2014年1月に公式ブログでWebGLサポートが発表されました（参照記事「WebGL Support in EaselJS」)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。 果たしてどのぐらいの性能があるのか気になりましたので、以前の検証記事「HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証」を元に、WebGL対応版のCreateJS(描画を扱うJSライブラリ「EaselJS」)のパフォーマンスを比較検証してみました。検証に用いたデモは次のリンクをクリックすることで再生できます。 CreateJS (EaselJS 0.7.1) : 従来版。CanvasのContext2Dが利用されている

var global = {} (function() { function class1() { function method1() { } return { method1: method1 } } global.class1 = class1; })(); (function() { function class2() { // class2で発火するなにかしらのEventに対してclass1のmethod1を実行したい } global.class2 = class2; })(); (function() { function class3() { var instance1 = new global.class1, instance2 = new global.class2; } })(); class2の中でclass1のmethod1を実行したい場合。 普通に考えるとcla

SourceTreeの使い方 - 初心者が習得すべき基本操作(diff, stash, tag, revert, cherry-pick) GitクライアントのSourceTreeソースツリーは無料で使えるGitアプリケーションとして人気があります。「SourceTreeの基本的な使い方はバッチリ！　だけど、まだまだ使っていない機能があるなぁ」なんて人も多いのではないでしょうか？　そんな人へオススメの知っておくと便利な機能を5つ紹介します。 ※本記事は2024年4月現在のmacOS 14.4.1、SourceTree 4.2.7で解説しています。Windows版のSourceTreeでも同じ手順で利用できます。 はじめに - SourceTreeとは？ SourceTreeはGit / MercurialのGUIクライアントで、Atlassian社から無償で提供されています。Windows

全編Swiftで書かれたオープンソースの人工知能／機械学習ライブラリが出てきました。その名も「Swift-AI」。 https://github.com/collinhundley/Swift-AI デモが入っていて、こんな感じで手書き文字認識してくれます（詳細は後述します）。 今のところ iOS と OS X をサポート しているとのこと。MITライセンス。 できること README の Features を見ると、2016年1月現在、フィードフォワード（順伝播型）ニューラルネットワークと、高速行列演算ライブラリはできあがっているようです。 それぞれドキュメントがあります。 https://github.com/collinhundley/Swift-AI/blob/master/Documentation/FFNN.md#multi-layer-feed-forward-neural-

プログラムの基本的な文法や例題を解くのではなく、実際に動くWebサービスを完成させることに重点を置いたプログラミング学習サービス「CodeUpStart」のご紹介！ 海外のサービスなので英語ではあるものの、すべて動画による学習構成になっているので、見ているだけでどのように制作していけば良いのか分かりやすくなっています。 また、プログラミングを最小限に抑えるために、便利なWebサービスをいろいろと連携させるテクニックも紹介されていて勉強になりますよ。 使い方！ サイトのトップページから無料の「ユーザー登録」を済ませて、学習したいコースを選択すればOKです。 例えば、オリジナルの「ポートフォリオ」を制作するコースを選んでみましょう！

利用可能なブラウザ Google Chrome Ver18〜 Firefox 7〜 Android OS Ver4〜 概要 Webサイトの制作では、ページデータの読み込み時間が問題になることがあります。ページが表示されるまでに時間がかかると、ユーザーのストレスが増加し、場合によってはユーザーが離れてしまう場合もあります。すばやく表示されるWebサイトであれば、ユーザーも使いやすいはずです。また、Googleはページの表示速度を検索結果の順位算出に使っていると明らかにしています（Googleの発表）。 ページの読み込み速度はJavaScriptで計測できます。ところが、JavaScriptではHTMLファイルが読み込まれHTMLの解釈が始まった段階からしか計測できず、どの処理に時間がかかっているのか、詳細な処理時間を把握できません。 そこで登場したのが、「Navigation Timing

Sass ( SCSS ) や Stylus といった CSS プリプロセッサを使う上で更に効率を高めるために Compass や Bourbon といった Sass ( SCSS ) のフレームワークを導入している方もたくさんいるかと思います。僕自身も SCSS を習得するとほぼ同時に Compass を愛用するようになりました。CSS のミニファイ化やベンダープレフィックス対応してくれる Mixin などとても多機能なのが魅力ですが、一方で動作が重くコンパイルに結構な時間が掛かる、Web ブラウザの CSS サポートが進むにつれて生成される CSS が冗長なものになりつつあるというのが気になるようになってきました。公式ブログを見る限り2014年8月に Ver.1.01 をリリースして以来メンテナンスされている様子もないことから1)Mac OS X - El Capitan では動作しな

インターネット経由でLチカさせる仕組みを解説 ここからはESP-WROOM-02イーエスピー・ダブルルーム・ゼロツーを用いた電子工作を解説します。次の構成でIoTな電子工作を目指しましょう。 スマートフォンのウェブブラウザでボタンをON/OFFすると、サーバーに設置されているPHPへ値を渡します。Arduinoからは定期的にPHPを監視し、接続されているLEDをチカチカと点滅させます。 回路を組もう 電子工作でよく用いるブレッドボードやジャンパー線はすでに手元にあることを前提に、下記のパーツで回路を組みます。ESP-WROOM-02イーエスピー・ダブルルーム・ゼロツーはブレッドボードで扱いやすいように変換されたものを使用します。 ※ESP-WROOM-02が正常に起動しない場合は、Arduino UNO R3のリセットボタンを押しながらESP-WROOM-02の電源をリセット（5V、GND

3Dコンテンツの制作において「三角関数は必須」とよく聞きます。ウェブサイト制作で三角関数を使う場面はほとんどありませんが、WebGLの勉強をすすめると3Dでは三角関数を使う場面が多いことに気づきます。本記事では3Dコンテンツ制作で使用頻度が多い基本的な数式と概念をまとめました。 今回解説する内容は地味ですが、ゲームやデータビジュアライゼーションを作る上でこの数式が基本となってきます。高校数学で学んだことをベースに、3つのサンプルを通して学習できるようまとめましたので、ぜひ最後までお付き合いください。WebGLの人気ライブラリの1つ「Three.js」を使って解説しています。 三角関数を使ったデモの紹介 まずは、本題に入る前に三角関数を使ったデモを作成したので紹介します。次のリンクをクリックしてご覧ください。 デモを別ウインドウで再生する ソースコードを確認する 地球をモチーフにしたサンプル

2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。

ダウンロードをしたらSIMBL.pkgというファイルを開いてください。 開くときに以下のような表示が出る場合は「環境設定」→「セキュリティとプライバシー」→「一般」から「すべてのアプリケーションを許可」を一時的に選択しておくといいでしょう。 ※今回の設定がひと通り終わったら元に戻しておくことをおすすめします。 ファイルを開いたらあとはインストーラーに沿って進めてください。 以下のように表示されればSIMBLのインストールは完了です。 ２．afloatをダウンロード、インストール 「afloat」は以下のサイトからダウンロードしてください。

7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับมิได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่เรามีให้เฉพาะสมา

CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle