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
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ(Mobile Safari)のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ(以下、Mobile Safari)にて、以下のコードを実行してみます。 (分かりやすい様にjQueryを使用させて頂きました) なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
概要 高度なアニメーションパス(Advanced animation path)作成 ・アニメーションのためにJavaScriptトゥイーンエンジンtweenjsを使用 依存ライブラリ ・tweenjs tween.jsとは? ・CreateJSに含まれるJavaScriptトゥイーンライブラリ 基本的な仕組み ・アニメーションループ ・requestAnimationFrameで、tweenjsのupdateメソッドを定期的に呼出 //アニメーションのloop実行定義 animate = function(){ requestAnimationFrame(animate) TWEEN.update() } //アニメーションループ開始 animate() Link 動作確認 ・デモ 公開ページ ・Advanced animation path
変更内容 日付 更新内容 2015/09/06 記事に元々入れる予定だったライブラリを一つ追加しています。 初めに 個人的に使ってみて、良さ気なものをピックアップしておいた。 30個ほど候補があったが、分類してみて程よいものを今回紹介する。 5個のつもりだったが、ランダム系のライブラリを追加し忘れていたため最後尾に追加。 こんな夜遅くにビール片手に書いてますので誤字脱字があると思いますが、もしおかしな点があれば教えて下さい。 カウント系の実装 文字入力時にカウント・ダウンしてくれるやつね。 実装はクソ楽 limitCharacts var elem = document.querySelectorAll('input'), limit = 100; limitCharacts(elem,limit); 2Dライブラリと言えばこれ pixi.js こちらから、サンプルが見れる。見
ajaxなページもクローラーに読ませたいですよね。 そこでPhantomJS, CasperJS, SpookyJSです。 簡単に説明するとこんな感じ casperJSをNodejsから使えるようにするやつ こういうことをしたい クローラーがアクセスしてきた時だけ、アクセスしたURLをSpookyJSサーバーに投げて、SpookyJSがそのURLにアクセスし、DOMを取得してからクローラーに返すってことをしたらよさそうです。 SpookyJSをインスコ SpookyJSはもちろんphantomJSとcasperJSに依存してるので、まずはこの2つをグローバルに入れる必要があります。 npm install phantomjs -g npm install casperjs -g 必ず -g オプション! 次にプロジェクトのディレクトリで npm install spooky これしたら、O
lodash は underscore.js とほとんど同じ機能を持つユーティリティライブラリです。 似たような関数名があったり、破壊的メソッドだったりして、正しい使い方をちょいちょい忘れてしまうので、よく使う関数を逆引き形式でまとめてみました。日本語の記事もあんまりなかったので紹介の意味でも。 他にもいろいろ機能はあるので、気になる人は lodashのdocs を見ると良いかと。 Array操作 データ取得 2つの配列間で、一致しない値だけ取得する _.difference(array, array) _.difference([1, 2, 3, 4, 5], [5, 2, 10]); // → [1, 3, 4] 複数の配列の積集合(共通する値)を取得する _.intersection(array...) _.intersection([1, 2, 3], [5, 2, 1, 4],
こんにちは、あゆめぐです。 今回はダンジョン生成の基本部分。 アルゴリズムそのまま実装したものの状態まで書きました。 はい、相変わらずjavascriptです。 どこかのタイミングでいい加減にc#にしないとな〜と思うんですがjavascriptそのままいろいろ持ってけて便利すぎるんだ〜。 ほら私が好きなActionScript3.0もenchant.jsにしてもjavascript系だからね。 ##考え方 ダンジョンマップを生成するアルゴリズムの解説 こちらの二分割を繰り返す方法の方です。 しかしながらこの実装だとアルゴリズムばればれなのでここからいろいろカスタマイズしないと。 均等に分割する方法はまだ作成していないので気が向いたときにやってみようかと思います。 他にもダンジョン生成にはいろんなアルゴリズムがあって 迷路自動生成アルゴリズム 上記サイトのような本当にダンジョンというのもあり
js-xlsx で js で excel のファイルを生成する Excel ファイルの生成、めんどくさいですよね。CSV の生成めんどくさいですよね。HTML を出力した上でさらにやるのはだるい、というわけで、HTML の DOM を解析して JS で XLSX 生成してダウンロードさせたらいいんじゃね?と思ってそういうのやれるやつ探したら、js-xlsx ってのがあった。 これをつかって、HTML のレポートから XLSX を生成するコードを書いた。なかなかうまく動く感じしてる。 http://tokuhirom.github.io/js-xlsx-demo/ td タグに class を指定すると数字カラムになる、みたいな感じになってるのがいいかんじです。 js-xlsx で生成したXLSXは、FileSaver.js で保存させてます。 デモで利用している JS は以下のようなもので
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
kintoneはJavaScriptを使って自由にカスタマイズできます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできますが、セキュアなコーディングをしないと クロスサイトスクリプティング (以下、XSS)などの脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的なポイントを解説します。
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
Vue.js 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog を読んで触発されたので、自分も外見的に良いなと思ったポイントだけ書き留めてみます。さすがに実戦投入できていないので、そのあたりの精度は悪しからず。 サンプルコードの雰囲気 サンプルコードとか自分でちょっと触ってみたときの感触からは、以下のポイントが気に入りました。data-bidingsとかは前提として便利です。はい。 覚え切れそうな分量のAPI Class: Vue - vue.js 脳みそちっちゃいので助かります。それに尽きる。 プロパティによる宣言っぽさ Angularだとイベントハンドラ類を書くにも、$scopeに都度ハンドラを仕込んでいくのがあまり好きでないです。工夫で回避できそうですが、与えられたスタートが下記のような状態であることには変わりません。 angu
初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> 小山田 晃浩(株式会社 ピクセルグリッド) WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く