ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス

東京Node学園 15時限目に参加したときにふと思った疑問について。 Node.jsと非互換なAPI使ったとき、npmにあげていいの？package.jsonのengineとかで書けるのか #tng15— teppeis (@teppeis) 2015, 2月 10 Node.jsの場合 例えばNode.js v0.12系にしか存在しないAPIを使ったパッケージの場合、package.jsonのenginesフィールドにこう書くことで、 { "engines" : { "node" : ">=0.12" } } 適合しないNode.js v0.10でnpm installしたときに警告を出すことができた。逆に削除されたAPIを使っている場合はバージョンの上限も指定できる。また非推奨ながらengineStrictフィールドを使うと警告ではなくエラーにできる。 io.jsでの議論は では、io

【--- 追記（2015/02/22）---】 2/15に6to5がBabelと名称変更したので、記事の内容もBabelを使うよう変更しました。 Not Born to Die · Babel 【--- 追記ここまで ---】 2/7にnode.js v0.12.0がリリースされました。 Node v0.12.0 (Stable) 安定版のメジャーアップデートでES6構文がいよいよ一般的になるのではないでしょうか。 そして最近良く聞くBabel(旧6to5)。 ES6+のコードをES5に変換してくれるということで、ES6構文を動かせる環境が浸透していないフロントエンドで役立つライブラリです。 Babelはgrunt, gulp, browserifyなど多数のビルドツールで扱えるプラグインが提供されているので、jsのビルド工程があるプロジェクトであれば簡単に導入できると思います。 今回は前

HEADの参照を指定されたコミットに変更し、インデックスや作業ディレクトリの状態も変更する事ができる。git resetのオプションに--hard、--soft、--mixed（デフォルトオプション）があり、それぞれ使い方が異なるので覚えておく。個人的にはgit resetは良く使うので重点的に説明する。 とりあえず以下に示す通りGitレポジトリを作成して、このレポジトリを参考に各オプションの説明をして行く。 $ mkdir git-reset-test $ cd git-reset-test/ $ git init $ echo A > A; git add A; git commit -m "add A" A $ echo B > B; git add B; git commit -m "add B" B $ echo C > C; git add C; $ echo D > D; #

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu

最近では、街のコーヒショップやカフェ、新幹線の車内や空港などで『Macbook Air』を広げてお仕事をしている人を見かけることが珍しくなくなりました。一見すると“デキる人”のように感じますが、実際のところ「動作が重くて作業の時間が伸びている」……なんてこと、まさかないですよね……？ もし仮に「ギクッ!?」とした方がいたならば、トレンドマイクロが2015年2月10日に日本語版をリリースしたシステム最適化ツール『Dr. Cleaner』を試してみてはいかがでしょうか。不要ファイルを削除してディスクの空き容量を増やす「ディスククリーン」と、1クリックでメモリを最適化する機能があり、『Mac App Store』にて無料で提供されています。 『Dr. Cleaner』の最大の特徴として挙げられるのは、そのシンプルな操作性。「ディスククリーン」では、アプリをアンインストールした際に残ってしまってい

Technology Radarの2015年1月版から厳選したGo lang, React.js, Swiftなどの11のテクノロジーを紹介した記事先日 ThoughtWorks社 から最新の技術動向をまとめた Technology Radar の2015年1月版が発表されました。 このTechnology Radarですが毎回、『技術』『ツール』『プラットフォーム』『言語・フレームワーク』と4つの領域に分けて紹介しており、絶賛流行中もしくは今後注目されるテクノロジーなどが紹介されています。 今回はそんな『言語・フレームワーク』の領域から厳選した11の注目テクノロジーを紹介します。 はじめに 各テクノロジーは『Adopt』『Trial』『Assess』『Hold』という4つの階級のどれかに属しており、各階級は以下の意味を持っております。 ・【Adopt】企業での使用が推奨されるレベ

Solutions All end-to-end solutions Opinionated solutions that help you get there easier and faster

落ち着いたデザインにもあうシックなグラデーション、繊細な幾何学柄を使ったパターン、コピーやロゴを鮮やかに見せる背景など、アイデア満載ときめくようなデザインテクニックを使って作成されたものから定番ものまで、無料の背景素材を紹介します。

こんにちは、アプリケーションエンジニアの id:nanto_vi です。先日行われた Hatena Engineer Seminar #4 で、「TypeScript で実現する MVP アーキテクチャパターン」と題する発表を行いました。当日は皆様ご清聴いただき、また懇親会でも活発な質疑をいただきありがとうございました。 内容としては、TypeScript を用いたクライアントサイド Web プログラミングの話、及び既存の JavaScript フレームワークを採用せず、MVP (Model-View-Presenter) アーキテクチャパターンにのっとり開発を進めた事例の紹介となります。以下に発表資料を加筆修正して公開するのでご参照ください。 自己紹介 id:nanto_vi (外山真) アプリケーションエンジニア JavaScript、Perl アジェンダ 少年ジャンプルーキーでの T

よく訓練されたアップル信者、都元です。AWSを利用していると、APIキーの利用は必要不可欠です。数多くのAWSアカウントを扱っていれば、たまたまAPIキーは利用せず、管理コンソールへのパスワードだけで済んでしまうケースもあるかもしれませんが、これはごく例外的な状況です。しっかりとAWSを使いこなしている以上、APIキーを管理する機会が必ずあります。 鍵管理が大変 というわけで、皆さんは自分用のAPIキーを数多く管理しているわけですが、その管理は行き届いているでしょうか。少なくとも「失くしたｗｗｗ」なんていう事態は是非避けたいものです。大丈夫すか？ では、とあるキーがありましで、それが書き込まれている場所を全て挙げられますか？ あちこちのファイルに書き込んだりしていませんでしょうか。aws-cli用の設定ファイルはもちろん、環境変数設定用の~/.bash_profileの中、シェルのhist

（↑：イメージ画像） 歴史の資料集にある年表や、企業パンフレットの「○○グループの歩み」のような年表をブログ等に貼り付けられたら便利だと思いませんか？ 例えば、 好きな作家や画家の作品を年代順に並べる（「モネの作品集」など） ある国際問題に関するここ数年の状況をまとめる（「イスラム国の概要」など） 話題になったニュースの流れを時系列で紹介する（「STAP細胞問題の推移」など） などなど様々な利用例が考えられます。 そんな年表を簡単に作れないかな、と探していたところ”Timeline JS”という便利なものを見つけました。 Timeline JSとは？ だれでもオシャレでインタラクティブな年表をつくれるオープンソースのツールです。 このページの一番下に実際にTimeline JSでつくったサンプルを貼り付けています。 文字だけでなく画像や動画・地図・Wikipediaを載せることができ、年表

引き続きMySQLについて。DockerでMySQLを動かす場合は、いろいろと工夫が必要です。結構その辺躓いたので、メモ。 MySQLを使う際の注意点 DockerでMySQLを使う場合、注意すべきことは Dockerfileでは、複数行にまたがってサービスやプロセスの状態が保持されない(毎回サービスプロセスがすべて終了した扱いになる) MySQLはapt-getでインストールしただけではインストールが終わらない(インストールスクリプトの実行が必要) とくに厄介なのが一つ目です。MySQLでの処理(ユーザーの追加やパスワードの設定、初期テーブルの登録など)はMySQLのサービスが起動した状態でしか操作できませんので、Dockerfileだけでは処理が行えません(複数のコマンドを&&で連結して処理することも可能ですが、Dockerfileの可読性が下がりますし、見た目にもかっこよくないですね

Dockerイメージを作る手順、JenkinsからDockerを使う方法について説明しています。Read less

美雲このはとは？ 座敷童子一族の末裔として生まれ、栃木の由緒正しい某神社で暮らしていたんだけど、昔からのしきたりで一人前の座敷童子になるため東京で修行を開始！ 紆余曲折あって、ConoHaの応援団長に就任することになりConoHaを使っているみんなを応援するとともに、このはも一人前の座敷童子ではなく、「神様」になるために日々頑張っているよ！ プロフィール 名前：美雲 このは （みくも このは） 年齢：年齢という概念はないが、人間でいうと13歳くらい？ 身長：150cm＋α 体重：ひみつ 長所：勉強熱心・わりと機転がきく 短所：いじわると勘違いされる振る舞いをしがち 好きなこと：アニメを見たりゲームしながらのごろごろ

やりたいこと angular.jsを使ったシングルページwebアプリケーションの開発中にどのページでも同じ処理を行いたい場合がありました。 今回やりたかったのは以下のような処理を全ページにいれたかったです 例1. ログインせずにアクセスされたらログインページを表示するような処理 例2. socket.ioとの接続が確立できていなかったら接続または再接続を行う処理 phpなどのサーバサイドでの実装はよくやってましたがjavascript(というかangularjs)でこういう処理は初めてでした。 実装 実際にこんなに単純な認証があるかはわかりませんが、サイトにアクセスしてきたら必ずサーバへリクエストしてokならそのことを保持しておいて以降は何もしないという流れになります // メイン処理 var App = angular.module("App", ["ngRoute", "ngResou

汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点HTMLCSSSassscssCompass あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレな

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

websocketのpermessage-deflate extensionについて

こんばんは。ファガイです。本日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。 概要 ローカル上だけでファイルの保存ができるようになる方法になります。 自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。 今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。 確認ブラウザ IE11 Firefox GoogleChrome にて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。 ソースコード ソース自体は結構簡単です。 var text = "テキストデータ"; var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作り

こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません） 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの

まずは以下のサンプルをご覧ください。サーバーはWindowsで、内部・外部の文字エンコーディングはUTF-8です。UTF-8のファイル名を外部から受け取り、Windowsなのでファイル名をShift_JISに変換してファイルを読み込んでいます。basename関数を通すことにより、ディレクトリトラバーサル対策を施しています。 <?php header('Content-Type: text/plain; charset=UTF-8'); $file_utf8 = basename($_GET['file']); $file_sjis = mb_convert_encoding($file_utf8, 'cp932', 'UTF-8'); $path = './data/' . $file_sjis; var_dump($path); readfile($path); しかし、ディレクトリト

最近、仕事や趣味でAngularjsのDirectiveを作る機会が何回かありました。Directiveは非常に強力な機能ですが、使い方を誤ると碌なことにならないので現在どのような方針でDirectiveを作っているのかを書きます。 いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会　イベントレポートでも触れられているように、ベストプラクティスが見つかっていない感じなので色々な人の意見を聞きたいです。 基本的な方針 可能な限りDirectiveは作らない DirectiveはAngularjsの中でも仕様が複雑で理解しづらく、ファイルが分散するので作るだけの明確な理由がないものについてはDirectiveにするべきではない。Angularjsはビルトインディレクティブが充実しており、大半の問題はこれを利用すれば解決する。無駄な重荷を負う必要はない

知ってる人には今更と思いますが、今まで知らなかったのでメモメモ。 AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。宇宙航空研究開発機構とは無関係です。 (追記：JXAは公式の略称です →Introduction to JavaScript for Automation Release Notes) 詳しくは Appleの公式ドキュメント か、「参考」にあるリンクへどうぞ。 もう一つ記事を書いたのでこちらもよかったらどぞ。 Macのキーボード入力、マウスクリックをJavaScriptで (JXA) Script Editorで使う方法 まずScript Editorを使う方法を説明します。 好きなテキストエディタを使いたい場合は飛ばしてください。 (でも「用語説明」の表示の仕方は覚えておいて