JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。 むかしむかし 私にとってJavaScriptといえば、高校生時代(10 […]
10年間JavaScriptをコピペしていた僕がJavaScript本格入門して知った驚愕のJavaScript言語仕様覚書 | niwatako$
JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。 むかしむかし 私にとってJavaScriptといえば、高校生時代(10 […]
JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
Pinterest風グリッドレイアウトを作ってみよう (1/4) - ＠IT
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
JavaScriptによる正規表現の可視化ツール「Regulex」 | ソフトアンテナ
正規表現は様々なプログラミング言語やツールで利用できる、文字列の検索や置換に不可欠の存在といっても過言ではないかもしれません。 「Regulex」はその正規表現を可視化して分かりやすくグラフとして表示してくれるサービスです。 文字列で正規表現を入力すると対応したグラフが表示されるので、複雑な正規表現も直感的に理解できます(?)。 例1 例えば「(a|b\d+)*c」をビジュアライズすると以下のようなグラフが作られます。 グループがあってその中でaまたはbと数字の繰り返しがきて、最後にcがくる…というような正規表現が、グラフ化されました。 例2 もう少し簡単な例「abc\d+」を考えると次のようになります。 abcがきて、最後に数字の繰り返しが1回以上くる…。ということが直感的に理解できます。 まとめ 作成した正規表現グラフはイメージとして出力したり、サイトに埋め込んだりもできます(Java
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショ
これはすごい！3秒でプログラミングが始められるサービス17選 - paiza開発日誌
Photo by Jason Cartwright こんにちは。谷口です。 プログラミングの勉強で「ちょっとあの開発言語の勉強をしてみたいな～」「実際にコードを書いて動かしてみたいな～」という時に、ハードルとなるのが「実行環境の作成」だと思います。 そんな時に役立つのが、書いたコードをブラウザ上で実行できる「オンライン実行環境サービス」です。 今回は、実行環境の手間を省いて「書いたコードをブラウザ上で実行できる無料サイト」を紹介します。 目次 ・複数言語対応系 ・ideone ・CodePad ・paiza.io ・repl.it ・Codecademy ・runnable ・Wandbox ・SourceLair ・JavaScript系 ・JSFiddle ・jsbin.com ・Codepen ・jsdo.it ・PHP系 ・PHPfiddle ・PHP Sandbox ・Write
jQueryではじめるAjax：第3回 Youtube APIとjQueryを使いこなす｜gihyo.jp … 技術評論社
たとえば、検索結果を表示する簡単なアプリケーションのために、整形されたHTMLを含むデータを取得するには次のように指定します。 http://gdata.youtube.com/feeds/base/videos フィードの種類 データを取得するフィードは数種類あります。 通常はVideoフィードを使えば十分ですが、投稿者の情報やコメントの情報等を取得するフィードもありますので、必要に応じて使い分けてください。 全てのフィードは読み取り専用であり、認証無しでリクエストすることができます。 また、新しく投稿されたビデオがフィードで取得できるようになるには、インデックス化のため数時間かかります。 Videoフィード Videoフィードには、ビデオ、関連動画、standard、お気に入り、再生リスト、コメントのフィードがあります。 ビデオフィード ビデオを検索するには、ビデオフィードを使います。
YouTube Data API v3を試してみました｜YouTubeAPI｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room
参照：https://developers.google.com/youtube/v3/docs/channels/list 指定したチャンネルIDのチャンネル情報を取得できます。 複数指定する場合はチャンネルIDをカンマ区切りで指定します。 チャンネルIDは、http://www.youtube.com/cocoism3の"cocoism3"ではなく、「data-subscription-value」の値。 チャンネルIDはYouTubeチャンネルのソース内を「CHANNEL_ID」で検索してもわかります。 例）特定のチャンネル情報を取得する（認証なし） チャンネルID指定 2013/5/19 認証なしで、指定したチャンネルIDのチャンネル情報を取得します。 ※「id」にはチャンネルIDが入っています。 http://www.youtube.com/channel/チャンネルIDで、チャ
jQueryでURLを自動リンク化 | 私的雑録
$(function () { var str; str = $('#document').html().replace(/(https?:\/\/[\x21-\x7e]+)/g, function($1) { if ($1.match(document.domain)) { // ドメインが同じ場合は同じウィンドウ return '<a href="' + $1 + '">' + $1 + '</a>'; } else { // ドメインが異なる場合は別ウィンドウ return '<a href="' + $1 + '" target="_blank">' + $1 + '</a>'; } }); // 全て同じウィンドウで開く場合 // str = $('#document').html().replace(/(https?:\/\/[\x21-\x7e]+)/g, '<a href=
Google Maps Embed APIの使い方まとめ
2017/07/05 Google Mapsを自分のサイトやブログに埋め込んで表示できる「Google Maps Embed API」の使い方をまとめています。JavaScriptを利用しないので、プログラミングが苦手な方でも手軽に利用できます。 Google Maps Embed APIGoogle Embed APIの公式リファレンスです。詳しい仕様、プログラミング方法などを確認できます。準備 (APIキーの取得)Google Maps Embed APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用意APIキーを取得するためには、Googleのユーザーアカウントが必要です。まだ持っていない人は作成して下さいね。 Googleアカウントの作成Googleのアカウントを作成するには、このページから操作を行なって下さい。
戻るボタンとonloadイベント - Pixel Pedals of Tomakomai
ブラウザの戻るボタン(history.back)で戻った時にonloadイベントが走るかどうかは、ブラウザによって違うようです。 まず、IEですが、戻るボタンのときもonloadイベントが走ります。よって、なんにも心配要らないです。 次に、Firefoxではbfcacheと言う機能があり、以下の事情になってます。 ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません。 (中略) ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。 Using Firefox 1.5 caching と言うことで、Firefoxのことを考えるのなら、onpa
Microsoft Ajax Minifierを使用してJavaScript,CSSを圧縮して１つのファイルにまとめる（Webサイトの高速化、ブラウザ側） - tekkの日記 C#,VB.NET
Webサイトの高速化を行う手法の１つで、JavaScriptとCSSの圧縮・統合があります。複数のjs,cssファイルをまとめると、ブラウザとWebサイトとの接続回数が減り、CSSSpriteと同じく大きな効果があります。圧縮も効果はありますが、圧縮より統合の方が効果が大きいです。 実施に当たっては、CSSSpriteより js,cssの方が簡単なので、ファイルをまとめるという効果がどれほどのものなのか体感するにも良いと思います。 今回は、Microsoft Ajax Minifier を使った手法を紹介します。 Microsoft Ajax Minifier http://ajaxmin.codeplex.com/ JavaScriptの圧縮・統合 AjaxMin.exe -JS -clobber -warn -xml c:\jsmin.xml 2> c:\jserr.logJavaSc
複数の要素の高さを行ごとに揃えるJavaScript関数の実装方法
JavaScriptコードfunction equalBoxHeight(elm, num) { var elm = jQuery(elm); elm.each(function (i) { var height; var $this = jQuery(this); if (i === 0 || i % num === 0) { height = $this.height(); for (var n = i + 1; n <= i + num - 1; n++) { if (height < elm.eq(n).height()) { height = elm.eq(n).height(); } } for (var n = i; n <= i + num - 1; n++) { elm.eq(n).css("height", height + "px"); } } }); } equal
デバッグ時に使いたいjQueryのユーティリティ関数について
jQuery Advent Calendar 2013の20日目の記事になります。衝動的にエントリーしてしまいましたが、意外とネタがありません。しばらく『サイ本』をパラパラと捲っておりました。その中で何となく目についたjQueryのユーティリティ関数のことでも書いてみることにします。ただユーティリティ関数のこと全部書くと膨大な量になりそうなので、プラグインなどの開発の際のデバッグ時に使いたいjQueryのユーティリティ関数に絞ってまとめてみます。 ブラウザテスト用jQuery.browserブラウザのベンダとバージョンを示すプロパティ。ブラウザがIEの場合、msieプロパティがtrueになります。Safari、Chromeの場合はwebkitプロとティがtrueになり、Firefoxの場合はmozillaプロパティがtrueになり、Operaの場合はoperaプロパティがtrueになります
jQuery iframeの読み込み完了後のタイミングで処理を実行する方法 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery iframeの読み込み完了後のタイミングで処理を実行する方法】です。局所的な記事が続いていますが地味に使えるTipsなのでメモしておきます。デモの方を見ていただければざっくりとした使い方が掴めるかと思います。もしよろしければ合わせてご確認ください。 iframeの読み込み完了後のタイミング 読み込みのタイミングで何らかの動作をさせる場合は以下のような記述で実装可能です。 HTML <iframe id="tgt" src="http:****.com"></iframe> JS <script type="text/javascript"> $(‘#tgt’).load(function(){ console.log(‘読み込み完了’); }); </script> クリック等のタイミングで読み込み 次の例はクリック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
http://plus.appgiga.jp/masatolan/2014/07/25/53100/
Site Under Maintenance
http://lostlinksearch.net/blog/2012/12/jsonp%E3%81%A7%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AFapi%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%BF%E3%82%B0%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97/
GitHub - czottmann/jquery-base64: Port of Nick Galbreath's JS base64 string encoder.