Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 #NGパターン まずはやっ
Chrome, Firefox, IEのCopy & Paste実装方法 - Qiita
Ctrl + Cでクリップボードに任意の値をコピーしたい場合に、Chrome, Firefox, IEでどう実装するかまとめました。 クリップボードを操作するにはFlashを使うのがベタですが、その場合必ずFlashのボタンを押さないとクリップボードにアクセスできません。 今回はCtrl + Cでクリップボードにコピーしたいということで、HTML5のClipboard APIやIEのwindow.clipboardDataを使って実装します。 Chrome, Firefoxの場合 HTML5のClipboard APIを使います。 クリップボードイベント(copy, paste, cut)発生時のみ使用可能で、任意のタイミングでのクリップボード操作はできません。 まだドラフト版のAPIなので色々と制約があるみたいですが、基本的なCopy & PasteはChrome, Firefox両方と
ExpressなしでNode.jsで簡単なWebサーバを作ってみる、HTTPを学ぶ - Qiita
今回実現する機能 指定されたポート(8080)でコネクションの受け入れを開始する クライアントからHTTP通信でリクエストを受け取る リクエストヘッダで送られてきたURLのパスを解析する 解析したURLのパターンによって、そのパターンにバンドルした処理を呼びだす(リクエストハンドラ） =>本来Webアプリを作成する場合は、この処理を高度化し、別のファイルやモジュールに切り出す 呼び出された処理を行う =>今回は単純にHTMLをレスポンスとして返す ファイルの構成 // クライアントからのレスポンスを受け取り、適切なファイルに処理を依頼する // 必要なファイルを読み込み var http = require('http'); var url = require('url'); var fs = require('fs'); var server = http.createServer();
知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
作って理解するWebフレームワーク - きしだのHatena
前回、簡単なDIコンテナを作ってみたので、次はこれを使ってWebフレームワークを作ってみたいと思います。 Webサーバーをつくる まず、WebフレームワークなのでHTTPサーバーが必要ですね。なので簡単なものを作ります。 とりあえずブラウザからリクエストを受け取ったら200 OKとHTMLを返すだけのサーバーです。 今回は、そこらのブラウザからアクセスできればいいや、ということで、RFCとかの仕様に準拠することは考えません。 public class Server { public static void main(String[] args) throws IOException { ServerSocket serverSoc = new ServerSocket(8989); for (;;) { Socket s = serverSoc.accept(); new Thread((
Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく
「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。 ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。 そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ ファイルを準備しよう！ まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。 「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
HTMLでブラウザの表示幅が狭い時にテーブルの右側が切れるのを防ぐ
B! 31 0 0 0 Octopressでブログを書く時に Markdown記法でテーブルを書くことが出来ますが、 そのままtableを使うと幅が大きい時に右側が切れてしまうことがあるので ちょっと調整。 テーブル調整 テーブル調整 やったことはtable要素をscroll: overflowのスタイルを持った div要素で囲っただけ。 ただし、Markdownからテーブルを作るに辺り、 再生時に要素を入れるのが難しいので 表示する時にJavaScriptで入れるようにしました。 Markdown記入時にテーブルの上下に<div>を書いてしまうと 今度はMarkdownとして認識されなくなってしまうので直接書くことは出来ません。 (勿論、テーブルをHTMLで書いてしまうことは可能ですが。) 既に書いてある所も書き換えるのは大変なので安易にJavaScriptで挿入、ということで。 Jav
Javaですべての上場企業のと地方自治体のサイトをスクレイピングして大変だったこと - Qiita
私は主にJavaを使って大量のサイトからクロールとスクレイピングをしています。 作っているサイトは happyou.info です。上場企業と官公庁と地方自治体とその他1万サイトくらいスクレイピングしています。 このエントリでは、技術的なこと特にめんどうくさかった点を書き残しておきたいと思います。基本的なことかもしれませんが、私自身忘れそうなところもあるので。 1.上場企業は企業が入れ替わる 上場企業は毎日企業が入れ替わります。新規上場、上場廃止、合併、分社化、企業名変更は毎日のことです。この変化にキャッチアップするのが難しかったです。 日本取引所グループ 「よし上場前からきっちりスクレイピングして事前に準備しておくぞ」と思っても、上場にあわせてサイトをリニューアルしたりする企業も多いので油断なりません。 官公庁のサイトは、民間企業に比べるとはるかに移転が少なく落ち着いています。 地方公共
JSでInstagramの画像フィルターを作るまで - Qiita
INDEX はじめに ~ InstagramのフィルタをJSで作ってみる Canvasで画像ピクセルを抽出 セピア化やミラー反転などで練習してみる若きあの頃 フィルター効果を実現する方法がわからない トーンカーブをいじればいけんじゃん？ ラグランジュ補間が使えそう でもこれってめっちゃ時間かかりそう？→ Web Worker APIでかいけつ 最後に はじめに ~ InstagramのフィルタをJSで作ってみる 先日、Canvasを練習したいと思って画像変換でいろいろ遊んでたところ、「Instagram」の画像フィルターを実現してみたら面白そうかねと思って作ってみようと思いました。が、それまでに結構紆余曲折があったので、記録も兼ねて記事にまとめてみることにします。 個人的には、Instagramの本当のフィルターそっくりにはまだ動いていないものもあり、実践的でないものも多いかもしれませんが
ElectronでGyazoっぽいUIを実現する - Qiita
Electron (旧atom-shell)を使えば、JSやモダンなWeb技術を活かしてクロスプラットフォームなPCアプリを作ることができる。 APIが充実していて、Webページをただ移植しただけの単純なアプリだけでなく、割と手の込んだUIも実現できるかもしれない。 たとえば、Gyazoのようなスクリーンショットを撮るための領域選択のUIを作ることができる。 実装方法 画面の全体に透明なウィンドウを作って、その上の透明なWebページでmousedownなどのイベントにあわせて必要なUI要素を描画する。 https://github.com/uiureo/electron-crop-rect/blob/master/main.js app.on('ready', function () { const Screen = require('screen') const size = Scree
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
Mac OS X LionでApacheとPHPを動かす | HAPPY*TRAP
まずは、httpd.confからみていきましょう。 httpd.confの場所 /etc/apache2/httpd.conf httpd.confの編集 管理者権限が必要なのでsudoでエディタ(例ではvi)を実行します。 $ sudo vi /etc/apache2/httpd.conf PHPの有効化 httpd.conf内の以下の行のコメントアウトを解除（先頭の#を削除） #LoadModule php5_module libexec/apache2/libphp5.so ApacheとPHPの起動確認用に、 ドキュメントルートに簡単なPHPプログラムを作成します。 初期状態のApacheのドキュメントルートは/Library/WebServer/Documentsになるので、 その直下に、test.phpというファイルを作成します。 /Library/WebServ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
