[B! js] flyawayのブックマーク

Nginx proxy pass url from get argument

flyaway 2017/09/18

js
cors

リンク

nginx: Avoid CORS and reverse proxy settings - latest log

ブラウザから XHRでAPIサーバにアクセスして JSON が欲しいんじゃあ、でもサーバに(Access-Control-Allow-Origin *)は置けないんじゃぁ、 CORS 嫌いじゃぁぁぁぁという状況。実によくあると思います。 nginx でその辺やったことなかったので、やってみたら1時間ハマったのでメモ。ハマったらメモを残す。大事。

flyaway 2017/09/18

cors
js

リンク

[翻訳]Chrome デベロッパーコンソール　意外と知られていない10の機能 - Qiita

Things you probably didn't know you could do with Chrome's Developer Consoleの抄訳。 1. jQueryが入っていなくても$$で同等のことができる jQueryが入っていなくても$$('.hoge'), $$('#hoge'), $$('tagName')で同等のことができる（\$が2個であることに注意）。 $が1個の$('.hoge')も定義されているが、こちらは配列でなく1個の要素を返してくる。 2. ページを編集できる

flyaway 2017/02/02

js

リンク

簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス

flyaway 2016/07/15

js

リンク

FullCalendar - JavaScript Event Calendar

npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e

flyaway 2016/05/03

js

リンク

コア・JavaScript ( JavaScript. The Core. ) - oogattaの勉強日記

この文章は、 Dmitry A. Soshnikov さんの、 ECMAScript に関する優れた記事 "JavaScript. The Core." を許可を得て翻訳したものです。世の中に、 JavaScript のブラウザ API や、実装系に関する記事は多々あれど、 ECMAScript の仕様に則って、ここまで詳しく説明してくれている記事は殆ど無いと思います。今回は翻訳できておりませんが、文中で参照されている Dmitry さんの ES3 シリーズも、読み応えのある（ ECMAScript3 の仕様の副読本としても読める）素晴らしい内容ですので、是非チャレンジしてみてください！（ご要望があれば訳します翻訳許可を頂いたので、この記事内で参照されている章から逐次翻訳を進めます！）。ちなみに Dmitry さんは、計算機科学や数学にも明るい方でらっしゃいます。が、私は違います。極力

flyaway 2016/02/05

js

リンク

PDF.js で遊んでみた (ページの描画，テキスト・注釈の表示など) - きちぽよ〜

修士論文の予備審査が終わって一段落した seikichi です．卒業できるといいなぁ……． PDF.js は HTML5 とJavaScript を利用してPDFを描画するライブラリです． PDF.js を利用するとWebブラウザ上でPDFファイルを描画することができます．つい最近，このライブラリを利用して遊んでみたので，そのときに得た知識とかを適当に書いてみます．このエントリでは主に以下の内容について解説します． PDF.js の取得，ビルドページの描画テキストを選択可能な形式で描画注釈 (リンク等) を取り扱う PDF.js の各種オプション動作環境 PDF.js は Canvas や TypedArray など割とモダン(?)な技術を利用しています．利用しているWebブラウザが，PDF.js の要求を満たしているかどうかは，このページで確認できます．正直なところ

flyaway 2016/01/21

js

リンク

embed.js - 各種サイトの埋め込み表示をサポート MOONGIFT

今は数多くのサービスが埋め込み表示に対応しています。外部サイトに埋め込んでもらうことで閲覧数を増やしたり、結果としてバイラルしていくきっかけになります。とはいえ、各サイトによって埋め込み方が違うのでいちいち覚えるのが面倒です。そこで使ってみたいのがembed.jsです。embed.jsを読み込むだけで多くのサイトの埋め込みを自動処理してくれます。 embed.jsの使い方 Markdownコンテンツの埋め込み。HTMLにしてくれますし、絵文字も展開しています。 Instagram。 Flickr。 Googleマップ。 SoundCloud。ビデオタグ Video.jsのサポート。 Vine。 YouTube。 Twitter。 GitHubのGist。 CodePen。このようにembed.jsを使えば簡単にコンテンツの埋め込み表示ができるようになります。サイトによっては埋め込むコ

flyaway 2016/01/04

js

リンク

ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）

連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。ユーザーの体感速度を向上させる一概にJavaScriptの高速化といっ

flyaway 2013/07/19

js

リンク

Web系新卒っていうかゲーム開発者一年目が去年読んだ技術書 & ライブラリ - mizchi log

カタ氏(@hotchemi)が意識高い記事書いてたので、自分もまとめてみる。文系学部生がSIerに入社してから読んだ本メモ - ギークに憧れて http://hotchemi.hateblo.jp/entry/2013/04/01/000844 自分Web系っていうかHTML5+Unity+AS3 のゲームガッツリ系+Webもやるって感じなので、最近の自己認識としてWebっていうよりはゲームプログラマな気がしている。 JSが多いのはHTML5ゲームの技術調査とかしてたからです。書籍７つの言語７つの世界作者: Bruce A. Tate,まつもとゆきひろ,田和勝出版社/メーカー: オーム社発売日: 2011/07/23メディア: 単行本（ソフトカバー）購入: 9人クリック: 230回この商品を含むブログ (65件) を見る一部情報が古いが、ClojureやIoについて書かれた貴重

flyaway 2013/04/03

js

リンク

[JavaScript]猿でもわかるクロージャ超入門　６　クロージャの応用例「注文ボタン」 · DQNEO日記

クロージャは何の役に立つのか？前回の記事で、クロージャは「状態を保持する関数」であると書きました。これを応用すると、いろいろ便利なことができます。 jQueryとクロージャは相性バツグン jQueryを使った経験があれば、誰でも下記のようなコードを書いたことがあるのではないでしょうか？ $('#btn').click(function(){ alert('hello'); }); ここで、clickメソッドに渡されているのは無名関数function(){...}です。そう、無名関数と言えばクロージャの出番です！クロージャの応用例：２回目にクリックすると警告が出るボタンショッピングカートの「注文する」ボタンで、２重クリックすると２回決済されてしまうというサイトをたまに見かけます。 jQuery + クロージャを使うことで、これを防止してみましょう。 HTML <form name=

flyaway 2013/03/18

js

リンク

jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他

jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、自分なりにまとめました。誤訳して間違ったことをまとめてたり、最新の情報でないかもしれないので読まれる際はご注意下さい。（※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や挙動の変更を行っています。この記事は、前のバージョンから更新した時、既存のコードに影響がでそうな変更を並べたものになります。変更点を全部網羅しているわけではありません。箇条書きにすると以下のような感じ：削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A

flyaway 2013/02/17

js

リンク

IE6 を IE7/8 互換にする Script と XML & DOCTYPE宣言 - 続・教えて！Turing先生

Webデザインみなさん、こんばんは。楽しく HTML 書いてますか？HTML を書くのは楽しいですけど、ブラウザ互換性の検証は面倒くさいですよね。特に IE6 は一体何のつもりかと思いますね。そんな悩みの多くを解決するスクリプト ie7-js の存在を知ったie7-js とは IE6 の挙動を IE7 互換にしてくれる JavaScript です。 ie7-js - Google Code日本語の解説記事はこちら。今年の頭に話題になっていたようですね。見過ごしてました。IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナルIE6以下をWeb標準に準拠させるライブラリ『IE7.js』[to-R]このスクリプト、大変便利なのですが、一つ使用上の注意があります。html の一行目は必ず DOCTYPE 宣言を書いてください間違っても xml

flyaway 2012/12/01

js

リンク

JavaScriptでうっかりやってしまいそうなこと色々

こんにちは、中川です。今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない対象文字列を一括して置き換えたいなどでString#replace()を使いますが、検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。

flyaway 2012/11/05

js

リンク

手軽に美しく実装！ファイルアップロード用JavaScriptライブラリ4選 - Lancers開発ブログ

こんにちは、keiです。今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。手軽に実装できる見た目が今風 (大容量なので)アップロード中にプログレスバーが表示される Uploadify http://www.uploadify.com/ 複数ファイルアップロードが可能なjQueryプラグイン。 HTML5バージョンとFlashバージョンがあります。長所豊富なドキュメントとデモ高いカスタマイズ性短所 HTML5はライセンスが必要 Plupload http://www.plupload.com/ HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応し

flyaway 2012/09/04

リンク

jquery.tablefix.js

»Download jquery.tablefix.js は、Excel のウィンドウ枠固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための、jQuery プラグインです。 JavaScript 無効時はただのテーブルとして普通にそのまま表示される点と、他の類似品と違ってソート変更などの高度な機能がない代わりに、すでにデザイン済みの任意のテーブルにそのまま適用出来る点が特徴です。読み込むのはプラグインだけで、追加の css や画像ファイルは必要ありません。使い方普通にテーブルをデザインする jQuery とプラグインを読み込む jQuery のセレクタでテーブルを選択して、プラグインを呼び出すこれだけで、あとはプラグインがよかれにやってくれます。プラグインの呼び出し方 $('tableSelector').tablefix({width: 600,

flyaway 2012/08/06

js

リンク

tableのヘッダ固定やソートとかのAjax系ライブラリまとめ - Cyokodog :: Diary

flyaway 2012/08/06

js

リンク

チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net

フォームで利用するjQueryのスニペットコードをいくつか。どれも既出だと思うのでおさらいという事で。とはいえ、所詮はスニペットですので実際に導入する際は動作をしっかりと検証する事を強く推奨します。フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde

flyaway 2012/07/23

フォーカスしたらアニメーションしながら伸びる検索窓

js

リンク

JavaScriptをやり始めた人が理解したほうが良いJSONパーサのコード - sifue's blog

そろそろ4月も近いということもあって、新たにWeb業界やSIer業界に入るぞという方がプログラミングの勉強をし始めているころでしょうか。最近は、エンタープライズでもWebクライアントが主流になりつつあるのでJavaScriptの習得は避けては通れない道だと思います。また、Node.js等サーバーサイドのJavaScriptも出てきたこともあって、非常に有用な言語になりつつあります。そんなJavaScriptを学び始めている人の中でも、ある程度プログラミングをやったことがある人がJavaScriptの綺麗な書き方を学ぶのに絶対理解しておいた方が良い300行程度のソースコードがあります。それは、JavaScript: The Good Partsに載っているJSONパーサのコードです。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス作者: