0行から始めるクライアントサイドJavaScript入門 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
レスポンシブWebデザイン実装時にスクリーンサイズによってJSの処理を分岐させる方法
レスポンシブWebデザインを実装する時にはメディアクエリを用いてCSSをスクリーンサイズ毎に設定できますが、JavaScriptの処理をスクリーンサイズ毎に分岐したい時ってありますよね。今回はそんな時にJSの処理を分岐する方法をご紹介します。 window.matchMediaを使う方法 window.matchMediaを使うとCSSのMedia Queriesと同じようにスクリーンサイズによってJSの処理を分ける事ができます。具体的には下記のようにif文で条件判定をして使います。 if (window.matchMedia('screen and (min-width:768px)').matches) { //768px以上のデスクトップでの処理 }else{ //スクリーンサイズが768pxより小さい時の処理 } また以下の例のようにaddListenerを用いてリスナを追加する事
Handsontable - WebでExcel並のテーブル機能を実現
Webアプリケーションで必ず要望にあがるのがテーブル表示の表計算ソフトウェア並の機能ではないでしょうか。たとえばヘッダーの固定であったり、ソート、インライン編集といった機能があげられます。 そんな要望の大半をこなせそうなのがHandsontableです。Handsontableを組み込むとグリッドの表示、編集がまさにExcel並になるはずです。 Handsontableの使い方 Handsontableでは表計算ソフトウェアでは実装されているような多数の機能を実現しています。データの保存処理については別途実装がいりますが、表示はHandsontableにお任せです。業務システムのデータ表示に使ってみてはいかがでしょう。 HandsontableはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Handsontable - jQuery gri
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
話題かもしれないReactを使って簡単なアプリケーションを作ってみた。 - Qiita
数年前からjavascriptのフレームワークが数多く出てきたけど、その中でも最近話題かもしれないreactについて勉強してみた。 Facebook製で、Facebook、Instagram、GitHub (Atom) という大御所たちに使われたりしている。 作ったアプリケーション Qiitaのタグを取得してタグごとに記事一覧を表示するもの。 トップは新着記事一覧を表示。 デモ トレンド Googleのトレンドで見てみるとじわじわと人気が出てきているのがわかる。 backboneはいわずもがな、angularも直近だけ見ると落ち込んでいるように見えるが、reactはじわじわと伸びている。 https://www.google.co.jp/trends/explore#q=react.js%2C%20backbone.js%2C%20angular.js%2C%20vue.js&cmpt=q
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
はじめてのJavaScriptフレームワーク選び
対象読者 jQueryなどを使っているJavaScript開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。 JavaScript開発の歴史 フレームワークを説明する前に、10年ほど前から現在までのJavaScriptが歩んできた流れが分かると、どうして今、JavaScriptにもフレームワークが必要になってきているのか、または開発者はフレームワークに何を求めているのかが多少は見えてくることと思います。 2005年くらいまではJavaScriptは利用者や開発者から避けられていた技術で、たとえ使われても、非常に簡単で
pdf.jsを使いブラウザで見られるPDFスライド表示ツールを作った
追記: ライブラリとして切り出しました pdf.jsを使ってスライド表示するライブラリを書いた | Web Scratch どういうもの https://azu.github.io/slide/DOMQuery/sourcemap.pdf というPDFファイルを読み込んで表示しています。 普通のHTMLスライドのようにウェブページとして公開することも出来ます。 例) https://azu.github.io//slide/DOMQuery/ 作った経緯 mozilla/pdf.jsを使えばPDFをブラウザ上で表示出来るので、これを使ったプレゼンテーションツールとかあると面白そうな気がしたのが始まりです。 こういうのが欲しい理由としては以下のような感じでした。 Deckset みたいにPDFしか配布用のフォーマットがないものがある Deckset自体は便利なので使いたい でもSlideSh
[JavaScript] 仮想DOMを提供する『React』について少し調べてみた - Qiita
たまに耳にする React を自分なりに少し調べてみたので、まとめがてらメモを残します。 ちなみに初めて React を知ったのは 天下一クライアントサイドJS MV*フレームワーク武道会でした。 Reactとは Facebook のチームが開発している、ユーザインタフェースを構築する為の JavaScript ライブラリです。公式ページ ⇒ http://facebook.github.io/react/ その特徴は（公式ページどおりですが）、 MVCの Viewのみ サポート なので恐らく 他のライブラリと容易に組み合わせ られる Virtual DOM (仮想DOM) 1方向 の Reactive バインディング Reactive .. きっと、(見えないところでシステムが)動的に View を更新する、という雰囲気でしょうか.. 公式ページを見ると、やり方によっては双方向にもできる
![[JavaScript] 仮想DOMを提供する『React』について少し調べてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/75698438a9e02ba00783a5d2bd99560d33f42642/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFNCVCQiVBRSVFNiU4MyVCM0RPTSVFMyU4MiU5MiVFNiU4RiU5MCVFNCVCRSU5QiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MCU4RVJlYWN0JUUzJTgwJThGJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUU1JUIwJTkxJUUzJTgxJTk3JUU4JUFBJUJGJUUzJTgxJUI5JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hN2M4ZGQwNTRkYWFlOGRkMzBkZmY4MmJiOWMyZTNlYg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGt1c3UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTgzODlkZjUwMzQyMTYxZTIxNzkwY2ZmOGViMjg4M2Fh%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9930aeca5845401dec7cc9bf5b52d65f)
Adobe Illustrator CC 2014自動化作戦
このページはAdobe Systems（アドビシステムズ）社のIllustrator CC 2014をJavaScriptによって自動化運用するためのサンプルスクリプトを掲載しています。 Illustrator CC 2014はJavaScriptのコアオブジェクト、Adobeファイルオブジェクトに関しては他のAdobeソフトと同じです。つまりInDesign CS〜CC 2014、AfterEffects 6.5〜CC 2014、Photoshop CS〜CC 2014、Bridge 1.0〜CCで作成された一部のコードは、そのまま動かす事ができます。これはIllustrator CC 2014独自部分の機能だけを習得すれば良いと言うメリットもあります。 このページに掲載されているスクリプトはMac OS X Maverick (10.9) のIllustrator CC 2014を基準
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
カッコで括るJavaScriptの無名関数 (function(){/*処理*/})();
JavaScriptで、変数名を省略する記法 無名関数について説明する前に、JavaScriptで変数名を省略する書き方を説明します。 例えば、JavaScriptで今年の西暦を調べるには、次のようにします。
s.h's page - [Illustrator] JavaScript scripts
MITライセンス(※)のフリーウェアです。 ※ 要約すると、改変再配布ほぼ自由、保証なし、ということです。 その他の雑多なスクリプト、スクリプトの更新情報、プラグイン版、エクステンション版については、はてな とか 英語版ブログ を見てください。Github にもあります。 2018.07.20 選択オブジェクトを処理するスクリプトで、選択したグループ内のロック/不可視オブジェクトを処理から除外するようにしました。 2017.05.13 「円弧にする」通常のパスと同様にテキストパスを補正する機能を追加しました。 2017.03.12 「適当に連結」設定した距離以上に離れたアンカーポイントは連結しないようにできるオプションを追加しました。 2016.11.26 「メタボール」「メタボール（円弧）」「角を丸くするplus」で win.enabled を変更する箇所に try ... finall
体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita
こんにちは、ほそ道です。 今回はMV**なフレームワークのひとつであるVue.jsを取り上げてみます。 さて、どこから手をつけたら良いものかと思案にくれた結果、序論や諸注意点をアレコレ展開する前にまずはビシバシと弄って、ヒジョーにシンプルなサンプルをいっぱい作って体にしみ込ませてみるのがイイんじゃないかと思いました。 ボリュームがあるので何回かに分け、今回はビューモデルを生成するパターンをまとめます。 「考えるな、感じろ」の精神でやった後にどう考え学習すべきかや、どう設計すべきかなどの私見は述べられたら良いなと思っております。 ViewModel生成編 ディレクティブ編 [インスタンスメンバ編] (http://qiita.com/setzz/items/ebbfcc3565bcd27f344c) [グローバルメソッド編] (http://qiita.com/setzz/items/8f0
[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,
![[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbf9a8239270b982158e9318db2dd638d1ac2f8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090802.gif)
WordPress(PHP) からjQuery(JavaScript)に動的に値を渡す方法
WordPressセキュリティを考える会第6回資料 WordPress(PHP) からjQuery(JavaScript)に動的に値を渡す方法について WordPressに限らず、ウェブアプリケーションでPHPからJavaScriptに値を渡したい場合はあるかと思います。 以下の方法を検証してみます。 1. data-XXX 属性の値に渡す 2. wp_localize_script 3. esc_js wp_localize_scriptは、内部でjson_encodeを使用しているが、HTMLエスケープはしないので注意が必要。 詳細は -> http://www.rescuework.jp/blog/wp_localize_script-json.html 2014-09-07（日）14:00 - 17:00 東京都中央区新川1-3-4 PAビル5F コワーキングスペース茅場町 コワー
Javascript：処理の共通化メモ - Qiita
// 画面動作に必要な外部ファイル (function() { var htmlRoot = 'view'; var jsRoot = '/js'; var cssRoot = '/css'; var reg = new RegExp('^(.+?)://(.+?):?(/.*)?$'); var s = reg.exec(location.href); var url = s[3]; url = url.slice(1); url = url.slice(0, url.indexOf('/')); url = s[1] + '://' + s[2] + '/' + url; var baseDir = jsRoot + '/lib'; var jsfiles = [ url + baseDir + '/jquery.js', url + baseDir + '/transparency.
DarkroomJS – JavaScriptで画像切り抜き
画像加工を行うと言えばローカルで画像編集ソフトウェアを使うのが思い浮かびますが、最近では随分Webベースで行えるようになっています。複雑な加工はまだまだですが、ちょっとした加工であればWeb上で行う方が手軽だったりします。 今回はその一つ、DarkroomJSを紹介します。位置を決めて切り抜きするという加工をシンプルに手早くできるようになります。 DarkroomJSの使い方 DarkroomJSはCanvasタグを使って画像加工を行います。加工後はそのまま切り抜かれた形で保存もできるようになっています。今は写真コンテンツも大きくなっているので、それをユーザサイドで加工してもらうための方法として使ってみるのが良さそうです。 DarkroomJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 DarkroomJS MattKetmo/darkroomjs
クラスの書き方と継承 - Qiita
（2018/10/15編集）この内容すごいJSビギナーの時に書いたやつでして javascariptはclassやextends使えるので参考にしないほうがいいです。 とりあえずCompositeパターンで なんとなくいい感じで記述できてるような気がせんでもないが constructorとそれに付随する引数を取り入れたい… クラスの書き方 var Component= function(){}; (function(){ var _this_ = Component.prototype; ////プロパティ//// _this_.parent; _this_.name = "Component.prototype"; ////メソッド//// //for Leaf and Conmpsite _this_.operation = function(){ console.log(this.n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design Patterns on CodePen