2015-08-01から1ヶ月間の記事一覧
github.com内部的にFlashをつかっているのでスマートフォンでは動かないのですが、 ライブラリ（js）を読み込む swfを読み込む インスタンスをつくりイベントを張る の3ステップで手軽につかえるので便利です。 DEMO DEMOでは「コピーしましたよ。」というテ…
window.getSelection(); で選択範囲を取得することができ、toStringメソッドを叩くことでテキストにできます。 JavaScript (function(win, doc) { "use strict"; var select = doc.getElementById("select"); win.addEventListener("mouseup", _handleMouseu…
kimizuka.hatenablog.com kimizuka.hatenablog.com 以前、GruntからGulpに移行しかけたんですが、なんだかんだでGruntに戻ってきてしまいました。 Jadeも導入して、Gruntファイルを更新したのでメモを残しておきます。 ディレクトリ構成 以前のものから、Jad…
cache:http://kimizuka.hatenablog.com/entry/2015/03/23/000000 という感じで先頭に cache: をつけたものを検索するとGoogleに残っているキャッシュが表示されます。 URLを覚えていれば（運が良ければ）サーバ上から消えてしまったサイトでも確認できます。…
kimizuka.hatenablog.comhttp://codepen.io/kimmy/pen/mJNXXr/codepen.ioこちらの記事 のコンテンツをつくっているときに気づきました。 scssの変数にいれていたのでうっかりしたのですが、こちらのコンテンツ、$DOT_GAP を 1 / 2 にしてつかっているため、…
command + s もしくは、 File > Save Screen Shot でスクリーンショットが撮影できます。 関連記事 iOSシミュレータの導入方法 kimizuka.hatenablog.com iOSシミュレータの操作方法 kimizuka.hatenablog.com
maker.kimizuka.org5年前につくったこちらのコンテンツ ですが、PCが壊れたタイミングで.flaファイルをロストしてしまいました。。。 なおしたいところがいろいろあるので、JavaScriptに移植していこうと思い、とりあえずドット絵の部分からつくりはじめまし…
はてなブログにURLを埋め込むときに :embet:cite をつけるとOGPが展開されることがあります。kimizuka.hatenablog.com↑ こんな感じです。今回はその条件とそのときに表示されている情報を調査してみました。 meta情報なし jsrun.it HTML <html lang="ja"> <head> <meta charset="UTF-8" /> <title>OGPテスト - tit</title></meta></head></html>…
最近は以前より積極的にネットサーフィンしておもしろいサイトを探すようになりました。 僕が最近見つけただけで、全然最近公開されたものじゃないサイトもありますが、まとめておきます。 Kitasenju Design | 北干住デザイン kitasenjudesign.com一見すると…
developer.mozilla.org CSSでつかう CSS #ki:target { color: red; } #sho:target { color: red; } #ten:target { color: red; } #ketsu:target { color: red; } という感じで、idのtarget属性を指定すると、URLのhashにID名がついているときの見栄えを指定…
jQuery の on の第2引数にセレクタを渡すとデリゲートでイベントを張ることができます。例えば、 $("ul").on("click", "li", callback); function(evt) { //... } という感じでulにイベントを張った際callback内の、 this は li、 evt.target も li、 evt.de…
http://sozonoasobi.com/sozonoasobi.com 今月末（8/29 [土] 30日[日]）に銀座で展示会を開催します。 同じ職場の元上司で元部下の現同僚と一緒に展示します。 コンセプト 子供の頃って景色がもっとおもしろく見えていたような気がします。 いろいろ考えたん…
通常、モジュールパターンでクラス的なものを実装した際に、変数をインスタンスのメンバ的につかうときは、アクセスするためのメソッドを持たせる必要があります。 function Obj() { var x = 0; return { getX : function() { return x; }, setX : function(…
どちらも公式のAPIではないので油断はできませんが、現状は下記方法で取得することがでなくはないです。 公式ではないことには注意が必要です。 Twitter count.json停止に伴い動作しなくなりました。 http://urls.api.twitter.com/1/urls/count.json?url=対…
github.comこちらのプラグイン をつかえばらくらくです。
kimizuka.hatenablog.com前回はGoogleフォームのフォーム画面に対し強引にスタイルを当ててみました が今回は、より強引な手段をつかって投稿完了画面を編集してみたいと思います。以前は投稿完了画面にタグを打てたようなきがするのですが、最近ではテキス…
kimizuka.hatenablog.com kimizuka.hatenablog.com以前つくったもの を改良しました。 自動送りとユーザー操作のタイミングが重なったときの対策をいれました。 touchend が発火しないことのあるAndroid にも対応させるべく、touchmoveにイベントを張りまし…
普段、画像のbase64化には こちらのツール をつかっていましたが、最近compassに任せることができることを知りました。http://blog.thingslabo.com/archives/000058.htmlblog.thingslabo.com 記述方法 SCSS background-image: inline-image("画像のパス"); …
先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。github.com 現象 SCSS .btn { background: url(/img/btn.png) center center no-repeat; background-size: contain; } 上記のようなSCSS（backgroundでイ…
iOS の Mobile Safari ではページをホーム画面に追加することができます。 その際、ホームアイコンは、 <link rel="apple-touch-icon-precomposed" href="画像のパス" /> で指定できるのですが、その画像にベーシック認証がかかっていると反映されなくなります。apple-touch-iconが表示されない場合は確認してみましょう。</link>
kimizuka.hatenablog.com以前制作したスマフォ用カルーセル ですが、関係各所からの要望により、先頭と最後をループさせるように改良しました。方針としては、 先頭と最後尾にループ用の要素を増やす jQueryのanimateでスクロールさせる（コールバックを登録…
kimizuka.hatenablog.com kimizuka.hatenablog.com 以前の調査結果から、自作のツイートボタンには /share をつかっているのですが、最近Androidから叩いたときにデフォルトでページURLが入力されない機種があることに気づきました。TWEET #btn20150810 { di…
さくっと試せるデモをつくってみました。developer.mozilla.org DEMO
前回の記事 を書いていて思い出したのですが、iOS の Mobile Safari はブラウザバック、ブラウザフォワードでページ遷移した際、遷移先のページが初期状態になっていないことが多々あります。kimizuka.hatenablog.com 例えば前回のDEMOだと、LINKボタンを押…
DEMO http://jsrun.it/kimmy/4dhL JavaScript (function(win, doc) { "use strict"; doc.querySelector(".btn").addEventListener("click", function(evt) { var that = this; evt.preventDefault(); doc.querySelector(".loading").classList.add("on"); //…
developer.mozilla.org CSSでつかう CSS .box { float: left; margin: 10px; border-radius: 20px; width: 120px; height: 120px; font: 18px "AvenirNext-Heavy"; line-height: 120px; text-align: center; background: #a3a3a3; box-shadow: 0 0 5px rgba(…
サイト上で平方センチメートルをつかうときは <p>cm<sup>2</sup></p> cm2という感じでsupタグをつかって対応していたのですが、プルダウンメニュー内に実装する機会が出てきたときに困りました。もろもろ考えた結果、HTMLの特殊文字をつかって解決しました。 <select> <option value="">指定なし</option> <option value="S1">100
</option></select>…
DEMO http://jsrun.it/kimmy/kFam 効きません。 1つ要素をかませれば効くようになります。 DEMO http://jsrun.it/kimmy/h0mF
kimizuka.hatenablog.com約1年ぶりに改良しました。 ポイント1 jsdo.it HTML5-Gamesをつかってスマートフォンからの操作を実現しました。 ポイント2 willHitを実装し、次の移動で当たり判定が発生するかどうかを判断するように改修しました。 HitArea.protot…
Macと接続する MacのSafariの「環境設定」 > 「詳細」 > 「メニューバーに開発メニューを表示」にチェックを入れる MacとiPhoneをライトニングケーブルで接続 MacのSafariの「開発」から自分の端末を選択しSafariのソースを確認 ブックマークレットをつかう …
