A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team
※ 追記: id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!! これからYeomanに関して説明していきます。 Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話、yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。 Yeomanとは Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。 Yeomanを使う
ゴールデンウィーク中に5年ぶりにフットサルをしてまだ筋肉痛が癒えてないishidaです。社内でフットサル部を立ち上げてみましたが、参加人数が少ないので横浜近辺で一緒に球蹴りしてくれる人を募集中です。 さて今回は、JavaScriptのコーディングガイドラインを作成してくれるサービスのご紹介です。 JavaScript は HTMLやCSSよりも自由度が高いので、 ガイドライン化してコードを統一するのも手間がかかるかと思います。 また初めてガイドラインを作成する人にとっては、 JavaScriptのどこまでをルール化すればいいのかも悩む部分ではないでしょうか。 そんな時にお手軽でJavaScriptコーディングガイドラインを作成してくれるサービスがありました。 11の項目を設定するだけでJavaScriptコーディングガイドラインが作成できる jsCode http://jscode.org
kintoneはJavaScriptを使って自由にカスタマイズできます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできますが、セキュアなコーディングをしないと クロスサイトスクリプティング (以下、XSS)などの脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的なポイントを解説します。
TypeScript 1.5正式リリース。最新言語仕様を速習しよう! TypeScriptを使うときに役立つ情報がまとまったチートシート(1クリックで試せるサンプル付き)。 本稿はTypeScript 1.5.3を対象に解説を行います(※2016/11/08追記:姉妹サイトの@IT Insider.NETで「特集:TypeScript 2.0概説」 を掲載していますので、本稿と併せてご参照ください )。 早いもので、TypeScript 1.0がリリースされた2014年4月3日から、1年以上が経ちました。今年の頭あたりに本記事のTypeScript 1.0版からの更新の依頼が来た時は、(記事改訂は想定していなかったので)びっくりしました。情報をメンテし、良い情報がWeb上に残るよう運営するのは大変であろうな、と想像に難くないですが、筆者としてはうれしい限りです。 さて、去る2015年3月5
Web制作者/開発者が「今後、使いたい」JavaScriptライブラリおよびWeb技術を、ランキング形式で発表。2014年度前半はこれらを押さえよう。 ← 前回 連載 INDEX 次回 → 今年の初めに「人気上昇中のJavaScriptライブラリを調べてみた[ジャンル別に比較]」という記事を公開したことで、JavaScriptライブラリの人気ランキング情報へのニーズは高いことが分かった。しかし、その記事でのランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」を用いた。このため、ライブラリ名が一般的な英単語(例えば「LESS」など)の場合、どうしてもライブラリとは無関係の検索も含まれてしまっていることが懸念された(※それでも「人気上昇中かどうか」を計測する面ではある程度有効な手段だと考えている)。 そこで今回、より正確な情報を読者に提供するために、実際にWeb制作者/
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
enchant.jsで重要なスプライトとシーンを使うには:enchant.jsでHTML5+JavaScriptゲーム開発入門(3)(1/4 ページ) 大人気のHTML5+JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく。今回は、スプライトの3つの基本操作、スプライトシート、シーンの扱い方を解説。最後に「もぐらたたきゲーム」を作ってみよう
スマホでも動く無限横スクロールアクションのブラウザゲームを作る:enchant.jsでHTML5+JavaScriptゲーム開発入門(終)(1/5 ページ) 大人気のHTML5+JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく連載。最終回は、総集編として、無限に横スクロールするアクションゲームを、10ステップで作りましょう。キモは当たり判定です。
トップページ > JavaScriptゲーム > ライブラリ > enchant.js > サンプル サンプル キャラクターを右に移動 キャラクターを方向キーで移動 往復移動処理(キャラクターの画像反転) タップした位置にキャラクターを移動 ラベルの表示 当たり判定(ライブラリのメソッドを使わずに自前で判定) 当たり判定(ライブラリのメソッドで判定) キャラクターアニメーションの方法 キャラクターの追加方法 車の移動処理 レイヤーの前後関係を考慮したキャラクター追加方法 放物線状に物を投げる方法 プラグイン バーチャルパッドの使い方 付属のバーチャルパッドのプラグインが8方向入力に対応 enchant.js向けの全方向入力可能なバーチャルパッド 文字列(テキスト)描画のプラグインに文字列変更対応版のクラスを追加 ゲーム タップ・タップ・リンゴ(全てのリンゴをタップ) タップ・タップ・リンゴ
A collection of concrete examples for various game mechanics, algorithms, and effects. The examples are all implemented in JavaScript using the Phaser game framework, but the concepts and methods are general and can be adapted to any engine. Think of it as pseudocode. Each section contains several different examples that progress in sequence from a very basic implementation to a more advanced impl
fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。 古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか?そんな感じのスタディ。使用ライブラリはpaper.jsとprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。 最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減している
jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
Admit it, 3D is cool. But, you know what's cooler? 2D. I love WebGL, but unfortunately it doesn't work everywhere. This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises native Float32Arrays to store numerical data for highly optimised calculations. This is a collaborative effort between Matthe
はじめに googleサイト上で色々見た目をリッチ化したい、というミッションがあり、結構大変だったので 主に未来の自分に向けてメモを残しておきます。 全コード github GASのHTMLServiceを使っても色々できるようですが、Google Caja内での動作につき色々制限有。 あと、HTMLボックスでも行ける感じだったので試してみましたが、jQueryのバージョンが 特定以外だとダメだったり、やはりこちらも色々制限があります。 また、今回はどうしても従来のgoogle site内のコンテンツを拡張するというミッションだったため、 既存のgoogleサイト内にガジェットを配置する方法でjavascriptを走らせました。 できれば新しめの方法でいきたかったのですが、 時間が無い中で安全策を採択しました。 もっと簡単で良い方法があるはずです、だれか教えて下さい。 既存の方法おさらい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く