はてなブックマーク

divタグなどの枠内に画像を入れる時、縦横中央表示にして、かつ、枠のサイズより大きければ枠に収まるように画像の比率は変えずに小さくしたいということがあると思います。というより、先日自分はそういう事態に遭遇しました。 まず、サイズの比率を保ったまま、枠内に収める方法ですが、いろいろ試行錯誤した結果、下記のようにするとうまくいくことが分かりました。 img{ width:auto; height:auto; max-width:100%; max-height:100%; } widthとheightは普通、デフォルトがautoなので指定しなくていい場合が多いのですが、autoじゃないと動かないため指定しています。 上記の記述だと、枠(この場合、imgタグの親要素)のサイズより大きければ、max-widthとmax-heightの指定により、それ以上のサイズを超えないようになるので、枠に収まっ

どうもいまだに、『amazon 持っています』と検索すると、このブログの過去記事が上位に表示されるようです(amzon 持っています – Google 検索)。 過去記事：amazonの「持っています」にチェックを入れる３つの方法 | while(isプログラマ) ただし、上記記事を書いた時と今では登録方法が異なっています。いや、異なっているというより正確には減っています。上記ページで３種類の登録方法を書きましたが、うち２種類が現在使えなくなっています。１ヶ月ぐらい前まではウィッシュリストに入れて削除すると持っていますのチェックがでるので、それにチェックを入れると登録することができたのですが、それも無くなりました(参考：アマゾンの「持っています」登録方法: アマゾンの「持っています」登録が変更された！)。これにより、おすすめ商品に表示されている商品しか「持っています」に登録できなくなってし

クリックである要素の表示・非表示を制御することってあると思いますが、そういう場合はだいたいjQueryを使うことが多いと思います。自分もそういう場合はjQueryを使いますが、工夫次第でCSSのみで実装できるのでその方法を紹介(ただし、IE8以下には対応していないようです)。 主に使うCSSのテクニックは、:checked擬似クラスと隣接セレクタの+(もしくは、関節セレクタの~) :checked擬似クラスはチェックボックスやラジオボタンがチェックしている要素を表す擬似クラスで、例えば、以下のようにするとチェックボックスのオンオフでボタンの表示・非表示が切り替わります。 #entryBtn{ display:none; } #check1:checked ~ #entryBtn{ display:inline-block; } HTML <input type="checkbox" id=

また、HTML5 テクニックバイブルで知ったこと。 ECMAScript5ではいろいろな配列操作メソッド(イテレーションメソッド)が追加されたらしく、使ってみると便利そうなので勉強用にいろいろ触ってみたのでそのメモ。 以下、HTML5 テクニックバイブルに書いてあったイテレーションメソッドの説明の引用とMDLのサイトへのリンク(ただし英語。英語が読めない自分が紹介するのもなんですが・・・)。 forEach 各要素に任意の処理を逐次実行する 参考：Array.prototype.forEach() – JavaScript | MDN map 各要素に任意の処理を実行したり返り値で構成される配列を返す 参考：Array.prototype.map() – JavaScript | MDN filter 条件を満たす要素のみで構成される配列を返す 参考：Array.prototype.fil

本日、JavaScriptで縮小画像の作成 | while(isプログラマ)のコメント欄にて、慎之助さんから下記のようにコメントがありました。 「画像を縮小して表示」サンプルと 「canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)」のサンプルを元にして、 「JavaScriptで縮小画像を作成してサーバーにPOST送信する方法」を試行錯誤しながら作っていますが、なかなか出来ません。 そのやり方のサンプルを掲載されることを、とてもとても楽しみにいたしております。 canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)を使って縮小画像をサーバーに送りたいのだけれども、できないということらしい。 自分も上記エントリーの最後に「できそうです」と書いているものの、実際に試したわけではないので、今回試し

先日、画像を縮小して表示するページを作成してこのブログで紹介しました(JavaScriptで縮小画像の作成 | while(isプログラマ))。 ただ、このページからiPadやiPod touchで開いたうえで、ファイルの選択から『写真を撮る』を選び、縦向き(縦長)にして写真を撮ってみると、縮小した写真は横向きに表示されてしまいました。これは、写真が標準で縦表示になっているわけではなく、Exif情報のOrientation(向き情報)によって縦方向の写真となっているためにおこります。HTML5のcanvasではどうやらExif情報を考慮してくれないようで、そのため縦に撮った写真が横に表示されてしまったというわけです(それどころか、Orientationによって縦表示とされている写真をimgタグで普通に表示させても、PCのブラウザからは横表示になってしまうという)。 ただ、これでは少し困るの

またまたモダンWeb ―新しいWebプラットフォームの基盤技術を読んで知ったことのメモ。 あるDOM要素に指定のクラスがあるか確認したり、指定のクラスを追加したり削除したりするにはjQueryを使うと簡単にできますが、最近のブラウザのJavaScriptにはclassListというオブジェクトが導入してあるようで、このオブジェクトを使うことにより、クラスの操作が簡単にできるようです。 参考：element.classList – DOM | MDN 例えば、下記のようなHTMLがあるとします。 <div id="js-div" class="js-class test">classListでのクラス操作用</div> <div id="jq-div" class="jq-class test">jQueryでのクラス操作用</div> 以下、IDが”js-div”のdiv要素はclassL

スマートフォンなどで撮影した写真をサーバーに転送したい場合、撮影された写真そのままではサイズが大きすぎてアップロードに時間がかかり、縮小してから送りたいといったことをしたいと思っていたら、またまたHTML5 テクニックバイブルに書いてありました。HTML5 テクニックバイブルすごい。 というわけで、上記の書籍を参考に下記のようなコードを書いてみた。 HTML <canvas style="display:none"></canvas> <label><input type="radio" name="reduceFlag" value="0" checked>縮小する割合：</label><input type="number" value="50" style="width:50px" id="imageSize0">%<br> <label><input type="radio" na

canvasを画像データとして取得したい場合は、canvasのDOMオブジェクトにtoDataURLメソッドを使えば簡単に取得できる。 先日紹介した画像保存機能のついてないお絵描きツール、Canvas Painterを開いて適当に絵を描き、F12キーで開発者ツールを開いてコンソール画面で『window.open(document.querySelector(‘canvas’).toDataURL())』とすると描いた画像データが表示されるので、右クリックで保存できる。ちなみに、標準ではPNG画像だけれども、toDataURLの引数を”image/jpeg”とすると、JPEG画像が取得できる(ただし、透過部分は真っ黒になるよう)。 ただ、上記で作成された画像データはBase64のデータ。これをどうやったらPHPを用いて画像ファイルとしてサーバー上に保存できるかが分からなかったので調べてみると

最近、業務でiPad用のウェブサイトを作っているのですが、タッチ時の処理を、clickだと挙動がワンテンポ遅れるということでtouchendを使っているところがあります。ところがありますというのは、touchendだと、うまくいかないところがあったためです。 というわけで、わかった範囲でiOSでのclickとtouchendの挙動をまとめてみます。 clickは反応に少し時間がかかる 最初に書いたように、iOSのclickのイベントはタッチして少し時間がたってから発生します。これは、ダブルタップなどのイベントが発生する可能性を考慮してのことのようです(参考：うのらぼ。 – 【JS】iPhoneでタップの反応が遅いと感じたら)。 その要素上でスクロールすると、clickだと反応しないが、touchendは反応してしまう ある要素上に指をおいてスクロールすると、そのclickイベントは発動しま

昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。なんて思っているとCanvasでお絵かきアプリ (全8回) – プログラミングならドットインストールというレッスンがあるのを見て、突然HTML5のCanvasで作ったお絵かき掲示板を作ってみたいと思うようになりました。 いや、でもそもそもすでにCanvasで作られたお絵描きツールはあるんじゃないかと思い、調べてみたらすでにいろいろある模様。以下、見つけたもののリスト。 イラストブック – 無料レンタルお絵かき掲示板 今回見つけたもののなかで最もお絵かき掲示板っぽかったもの。普通にChromeで見てみるとかなり高機能なFlashを使ったお絵かきツールになるのですが、ChromeのUserAgent

(サーバーやドメイン代払っているのに、一年以上ぶりのエントリーという・・・) 一応、プログラマと自称している自分ですが、仕事ではむしろCSSを書くことのほうが多かったりします。 で、CSSを扱っていてときどきよくわからなくなるのが、CSSで出てくるパーセント(パーセンテージ)はいったい何を基準としたものなのかと。 だいたい想定とあってはいるのですが、たまに想定外の動きをすることも。 というわけでまとめてみました。 色系 RGB値 説明：色をRGB表記で指定する 範囲：0～100 指定方法：rgb(R%, G%, B%) 例：color:rgb(50%, 10%, 30%) 参考：スタイルシート［CSS］/CSSの基本/CSSの色指定 – TAG index Webサイト “color”や”background-color”などの色の指定のプロパティで利用する。 それぞれ左から赤、緑、青の値

ある日、あるページで、Chromeデベロッパーツールのコンソールを開き、「jQuery使ってるページかな？」なんて思って、『$』と入力してエンターキーを押すと、以下のような表示に。 > $ function $() { [Command Line API] } コマンドラインAPI？？ って何だ？ 標準でjQueryみたいなことができるのか？ と思いながら検索してでてきたのが以下のサイト。 Command Line API Reference – Chrome DevTools — Google Developers 元々Firebugについていた機能なようなのですが、Chromeのデベロッパーツールにもついているそうです。 というわけで、高校の英語の授業では成績順にA,B,Cクラスと分かれていてずっとCクラスだった自分、そして大学の英語の必須授業はさっぱり分からずに危うく単位を落としかけ

Vue.js3のテキストボックスのv-modelは、日本語入力中などのIME入力中は値が更新されません。これは、ドキュメントにも記載されています。 参考：フォーム入力バインディング | Vue.js IME を必要とする言語 (中国...

HTML5のFile APIを勉強しているときにbase64というものを知りました(wikipedia:Base64)。というわけで、今回は勉強したFile APIを使って作った簡単なプログラムの掲載。なお、IE9には対応していないようです。 <form> <input type="file" onchange="fileget(this);"> <textarea id="base64area">base64データ</textarea> </form> <script type="text/javascript"> function fileget(imgfile) { if(!imgfile.files.length) return; var file=imgfile.files[0]; var fr=new FileReader(); fr.onload=function(evt)

仕事で、ルート案内ができるAPIがないか調べて実装してほしいとのことだったので、調べてみたらGoogleマップにあるというのが分かった。その時見つけたのが下記の記事。 ASCII.jp：Googleマップ待望の新機能「ルート案内API」の使い方 GDirectionsというオブジェクトを使うらしい。v2でしか使えないようだけど、まあいいだろうと思って実装。 ただ、v3でしか実装されていない交通状況のAPI(Google Japan Blog: 交通状況がGoogle マップで見られるようになりました)も使いたいとのことだったので、v2とv3のAPIを両方使うということなのだけれども、どうにも衝突してしまってうまく動かない。 困ったなぁ。と思いながらもう少し調べてみると、v3にはgoogle.maps.DirectionsServiceという似たようなオブジェクトがあると知る。 Maps A

Sign-up for an API Key – Google Loader — Google Developers 多分、上記のリンク先に、不要ということが書いてあるはず(英語分からない)。多分、このGoogle Loaderというものの中に、Google Feed APIも入ってるはず。左の”APIs Using the Loader”をクリックしたら、”Google Feed API”の説明ページへのリンクが表示されるし。 というわけで、最近ちょっと気になってきたので『Google Feed API』を使ってみることに。勉強をするにあたって、参考にしたサイトは以下。 Google AJAX Feed API入門 google.load("feeds", "1"); function initialize() { var amyu = new google.feeds.Feed("ht

特に自分がよく間違うのは、検索窓フォーカス。Firefoxを使い始めたころに、「Ctrl+Kで検索にフォーカス」なんてことを聞いたものだからずっとCtrl+Kでやっていたのですが、IEでCtrl+Kをやるとタブが複製してしまいます(この機能はこの機能でよく使ってますが)。検索フォーカスは、Ctrl+Eのほうが全共通でいいかもしれません。 ところで、タブ複製のAlt+D+Enterのやり方は公式ではありません。アドレスバーの文字列選択のAlt+Dと、新しいタブで開くAlt+Enterを組み合わせたものです。なので、正確にはAlt+D→Alt+Enterなのですが、これでも通用するそうなので書きました。元々、「ライフハッカー」というサイトで知ったやり方です。 Chromeユーザ向け、ショートカットキーでタブ複製する超カンタンな方法 また、ページの一番上、一番下のショートカットキーにCtrlキー