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
こんにちは、古見澤(コミザワ)です。最近は寒いですね。 自宅に加湿器を導入して潤いが増した一方、結露が酷くて窓際や玄関がカビそうで困ってます。 さて今回は Chroma.js という色に関するJSライブラリに触れる機会があったのですが、日本語の記事が殆ど見つからなかったため、この紹介をしようと思います。 Chroma.js とは 色を補正したり、色空間の変換をしたり、カラースケールを設定して色を得る事ができる、色に関する振る舞いに特化した軽量(32.8 KB)なJSライブラリです。 多くの色空間に対応しており、CSSやJavaScriptで扱いやすい形で色情報を取得することができます。 ソースはgit上にあり、ライセンスは BSD license です。 Chroma.js サンプル 下の例は色の補正機能を使い、X11カラーのpink(#ffc0cb)をベースに、明るさを下げ、彩度を上げ、
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数値と文字列日付と時刻の表現正規表現インデックス付きコレクションキー付きコレクションオブジェクトの利用クラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターリソース管理国際化JavaScript モジュール中級編Advanced JavaScript objectsAsynchronous JavaScriptClient-side web APIs言語概要JavaScr
こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています! 2015年度の JavaScript 研修は、Web アプリケーションの部品(モジュール)をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS
this はインスタンス自身を指す、ただそれだけの話でしょう? そんなふうに考えていた時期が私にもありました。そう、JavaScript の this に出会うまでは・・。 用語について 私は Java 脳で書いてるので、言葉遣いが JavaScript と若干違う部分があると思います。 下記のようなイメージで言葉を使っています。 用語 意味 クラス インスタンスオブジェクトの元となる設計図 コンストラクタ クラスのコード部分で、new したときにコンストラクタの内容で初期化する インスタンス クラスを元に実体化したオブジェクト メンバ変数 クラスやインスタンスに属するローカル変数 メソッド クラスやインスタンスに属する命令(関数) オブジェクト指向とプロトタイプと this JavaScript のオブジェクト指向開発では、元になるクラスを new することで、インスタンスを生成します。
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ? と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
レスポンシブWebデザインが流行っていますが、その一番の難敵とも言えるのがテーブルではないでしょうか。特に業務系システムや管理画面をスマートフォン/タブレットに対応させる上で幅が狭い中でいかにうまくテーブルを表示するかは大きな問題です。 そこで使ってみたいのがTableSaw、レスポンシブなテーブルを実現するライブラリです。 TableSawの使い方 TableSawには2つのレスポンシブ対応が可能です。まず一つ目はスタックと方式です。 こちらが元々のテーブルです。幅を狭めてみましょう。 縦並びになりました。これがスタックです。 スタックの通り、横に並んでいたデータを縦に積み重ねています。1行1行のデータは見やすくなりますが、他の行との比較が難しくなってしまうのが難点です。 もう一つはスワイプです。こちらも幅を狭めてみます。 右上の矢印が有効になりました。表示されている項目も減っています。
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。スマートフォン版Amebaでディベロッパーをしている宇納です。 本日は普段の業務とは離れて、ちょっとだけ便利なTipsのご紹介です。 Mac OS用のクリップボード・ユーティリティソフトClipMenuをJavaScriptで拡張する方法と、それを使ったサンプルをご紹介します。 とても簡単にできますので、プログラミングが苦手な方も是非挑戦してみてください! ClipMenuとはクリップボードの履歴を保持しておけるフリーのアプリケーションで、これを使うとコピー+ペーストを何度も繰り返さなくても、コピーした履歴から呼び出してペーストができます
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ4選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語:https://google.github.io/styleguide/javascriptguide.xml 日本語:http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl
Basic of JavaScript P _檪 # 目次 + JavaScript オブジェクトと値の型 basic-of-javascript_01.md JavaScript オブジェクトと値の型 全ての値がオブジェクト プログラムとは、値の振る舞いや取り回しをコンピューターに命令するために記述したものである。 JavaScriptでは、予め組み込まれているものも含め全ての値がオブジェクトであるかオブジェクトのように振る舞う。 オブジェクトは集合 オブジェクトとは、名前(キー)と値(バリュー)をペアとしたプロパティの集合で、中でも値に関数が与えられているものをメソッドと呼ぶ。 // オブジェクトは「名前:値」の集合 var object = { propertyName: 'Value', methodName: function () { return 'Do something.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く