スマホの地図アプリをウェブページから開く | バシャログ。
どうもfujiharaです 本日はウェブページ内リンクからスマホの地図アプリを開く方法をご紹介します。 アプリケーションを開くと現在地から目的地住所までのルートが表示され、ナビゲーションスタートを押すとナビが始まります。 流れ 以下の流れで設定をしていきます。 ①まず、住所情報がGoogle Map Api で取得できるか確認。 ②住所情報が取得できたら住所をリンクタグで囲む。 ①については代わらない住所であれば省いてしまってもかまいません。 実装 HTML <p>株式会社シーブレイン</p> <span class="address">横浜市中区尾上町5-77-2馬車道ウエストビル8F</span><br></span> <p>馬車道駅(地下鉄)</p> <span class="address">神奈川県横浜市中区本町五丁目49</span> JavaScript $(document
SVGの雪を降らせる | バシャログ。
どうもGW前に風邪を何とか治して安堵しているfujiharaです。 SVGを調べていたら雪降らせたいって事で、JavaScript で降らせてみました。 (後から考えればSVGである必要はないのですが・・・) 背景 SVGについて調べていたら、丸い背景を作った段階で、季節関係なく雪を降らせたいと思いこの記事にいたりました。 HTML まずはHTMLです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>snow</title> <!--load library--> <style type="text/css"> ♯wrapper, ♯wrapper svg { width:900px; height:900px; background-color:black; display:block; } <
YouTube Player API で動画を制御する | バシャログ。
どうもお久しぶりです fujihara です。 春一番が吹き荒れ街も暖かくなってきましたね。 季節の変わり目って布団の量が難しくて風邪を引きやすいと私は 思っているので皆さんもお気をつけ下さい。 本日はYouTube Player API で動画を制御します。 目的 業務で YouTube を連続で再生させたいという依頼があり使用しました。 (詳細は省きます) コード 以下Googleのサンプルコードです。** 参考 ** iframe 組み込みの YouTube Player API リファレンス <div id="player"></div> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = d
フォーム select を装飾する前準備 | バシャログ。
どうもfujiharaです。 ついにこの季節がやってまいりました。3月に社内のロッカーに置きっぱなしにしていたダウンを持って帰る日が！ ってことで無駄話はさておき本日はセレクトボックスを装飾する前準備を 紹介したいと思います。 概要 本日は select を装飾する前準備を紹介します。 なぜ前準備 ？ かと申しますと私が出来るのは <select> を <ul>として 見せるまでの js 処理までだからです。(汗) 実装 では早速実装に入っていきます。 まずはHTMLからです。 <div class="wrapper"> <select name="test"> <option value="first">first</option> <option value="second">second</option> <option value="third">third</option> <o
CSS: 画像をCSS animation を使ってクルクルまわす。 | バシャログ。
どうもfujiharaです。最近、掛け布団の量が難しい季節ですね。 皆さん体調管理には十分ご注意下さい。ちなみに私は風邪引きました。 先日、業務で先輩社員から以下のような依頼を受けました。 先輩 『アイコンを3つ並べてあるから、左から順番にクルッ、クルッ、クルッとJSで回して下さい。 rotate ってクラスを与えてあげて、animationend でイケるから～』。 私 『なるほど、画像のCSS animation 終了で次の画像にrotate クラスを与えてあげれば良いワケね』。 イメージとしては以下の画像になります。 まずはCSSを見ていきます。以下のように書かれています。 <style> .rotate { -webkit-animation: spin 0.4s ease-in-out 1; -moz-animation: spin 0.4s ease-in-out 1; ani
子ページから親ページ（別ドメイン）の iFrame の大きさを操作する | バシャログ。
近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。 さて、今回は tips です。 別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。 最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に空間ができたり逆にスクロールバーが出たり… みたいな事を回避するための tips をご紹介します。 postMessage を利用するので、古めのブラウザでは動かない可能性があるのでご注意をば。 postMessage による値の受け渡し 他のページへのメッセージの受け渡しは window.postMessage() を使います。書き方は以下。 window.postMessage("value"
11の項目を設定するだけでJavaScriptコーディングガイドラインが作成できるjsCode | バシャログ。
ゴールデンウィーク中に5年ぶりにフットサルをしてまだ筋肉痛が癒えてないishidaです。社内でフットサル部を立ち上げてみましたが、参加人数が少ないので横浜近辺で一緒に球蹴りしてくれる人を募集中です。 さて今回は、JavaScriptのコーディングガイドラインを作成してくれるサービスのご紹介です。 JavaScript は HTMLやCSSよりも自由度が高いので、 ガイドライン化してコードを統一するのも手間がかかるかと思います。 また初めてガイドラインを作成する人にとっては、 JavaScriptのどこまでをルール化すればいいのかも悩む部分ではないでしょうか。 そんな時にお手軽でJavaScriptコーディングガイドラインを作成してくれるサービスがありました。 11の項目を設定するだけでJavaScriptコーディングガイドラインが作成できる jsCode http://jscode.org
Internet Explorer 11の開発者モードについて調査しました デバッガ/ネットワーク編 | バシャログ。
プログラムの実行を一時停止(ブレーク)させて変数の状態をチェックしたり、関数の呼び出し階層(コールスタック)を調査できる機能です。 使いやすくなった機能 タブで複数のファイルを開けるようになりました(複数のコードを比較することはできないようです) ミニファイされたコードの展開(ボタン1つワンクリックでできるようになった) ブレークポイントやテキスト検索でヒットした位置がスクロールバーに表示されるようになった ブレークしたときのローカル変数、ウォッチ式、コールスタックが同時に見られるようになった トレースポイント トレースポイントはIE11で追加されたものです。ブレークポイントに似ていますが、設定した行で停止せず、コンソールに残す一時的なログを設定できます。 ソースコードにconsole.logを書かなくて済んだり、リロードしなくてもよくなるのでかなり便利な機能かと思います。 条件つきブレー
Internet Explorer 11の開発者モードについて調査しました DOM Explorer/コンソール編 | バシャログ。
iPhone 5sに続きiPad mini Retinaディスプレイ買ったぜ！ フルサイズのiPadは日常的に持ち歩くにはちょっと大きい&重いですが、iPad miniなら十分毎日持ち歩けます。コミックビューアとゲームとニコニコPDFビューア・文書・スライド作成ツール・Evernote用として重宝してます！ さて、去る2013年11月8日(米国時間)、Internet Explorer 11がWindows 7 向けにも正式リリースされました。開発者ツールが見た目からして変わってたので調査しました。過去のバージョンとの互換性など気になるところも見つけましたが、とりあえず開発者ツールについて紹介します。 ところで、IEの開発者ツールはF12キーで開くことができますが、開発者ツールの名前も"F12"だったんですね。調査していて初めて知りました。 読み込んだHTMLページを読み込んで構築したDO
window.open で開いた窓に対して Post する | バシャログ。
いやあ、もうすぐスーパーマリオ3Dワールドの発売日だねえ！って言ったら「もうマリオはいいでしょ…」って言われた kimoto です。 なんでだよ！すっげえ面白そうじゃんかよ！よくないよ！ さて、本日はちょっと小ネタで、window.open で開いた窓に対して Post でデータを渡す方法です。 利用場面としては、フォームの確認画面を小窓で開きたい時などですね。 URL にデータを乗っけて Get で開く方法も無くはないですが、データ量に制限もあったりなど、いろいろと問題があります。 ということで、開いた窓に対して Post でデータを投げる方法です。 function open_preview() { window.open("about:blank","preview","width=600,height=450,scrollbars=yes"); document.input_for
コナミコマンドを入力したときにイベントを発生させるjQueryプラグイン「jQuery.easterEgg」 | バシャログ。
こんにちは。fukasawaです。 最近になって、関内駅の発車ベルが横浜ベイスターズの球団歌であることに気がつきました。アレンジが変わるとなかなか気づかないものですね。 さて、今回ご紹介するのはコナミコマンドを入力したタイミングでイベントを発生させるjQueryプラグイン「jQuery.easterEgg」です。PCから以下のデモページを表示し、「↑↑↓↓←→←→BA」とキーボードを叩いてみてください。コマンド入力後に画像が表示されます。 デモページ ページを表示した後、コマンド入力より先に別のキーを叩いたりするとイベントが発生しません 入力失敗した場合は一度リロードしてからもう一度入力してください ページ内に隠しコンテンツを作成し、コマンド入力に合わせて表示したい場合などに使えるかもしれません。 jQuery.easterEgg 使い方 jQueryとjQuery.easterEggを読
いろんな種類のランダム値を生成するJavaScriptライブラリ「Chance.js」 | バシャログ。
今、凄くレッドブルが飲みたいfukasawaです。こんにちは。 翼を授かりたいです。授かったところで飛ぶ用事も無いんですが。 今回ご紹介するのは、様々な種類のランダム値を生成するJavaScriptライブラリ「Chance.js」です。 このライブラリを使うことで、文字列、数値、文章、色、クレジットカード番号等のランダム値を簡単に生成することができます。 Chance.js 使い方 1. chance.min.jsを読み込みます。 <script type="text/javascript" src="./js/chance.min.js"></script> 2. インスタンスを生成しメソッドを実行します。 以下の例では、文字列のランダム値を生成しコンソールに出力しています。 var my_chance=new Chance(); console.log(my_chance.string
Vim で javascript 書くためにやってる設定 | バシャログ。
杉の木を伐採しまくるバイトを始める夢を見ました・・・。みなさん、こんにちは nakamura です。 前回 Vim で PHP 開発するための設定 を書きましたが、今回は Vim で javascript を書くための設定をいくつかご紹介しようと思います。（基本は前回 PHP 用に行った設定の javascript 版です） 関数名などの自動補完 PHP と同様に辞書ファイルを用意して neocomplecache で補完するだけです。辞書ファイルは以下からjavascript.dict と jQuery.dict を拝借して $HOME/.vim/dict/ に置きました。 config/vim/dict at master · guileen/config · GitHub （ただちょっと古いんだよな～・・・。自動生成するスクリプト軽く書こうかな・・・。） .vimrc autocmd
別ドメインのjsonデータをXMLHttpRequestでやりとりする | バシャログ。
いつのまにやら家から5分の距離に新しくコンビニができたことに気づいたtanakaです。 今日は、別ドメインのjsonデータをXMLHttpRequestで普通に取得するにはどうすればいいか調査したので方法をまとめます。実装としてはもう4年くらい前から使えるようになっていますが、私はまだ使ったことがなかったので。 XMLHttpRequest とクロスドメイン XMLHttpRequest が Internet Explorerに実装され、それ以外のブラウザに実装された当初は JavaScriptが実行されたページのドメイン以外にリクエストを送りデータを受け取ることはできませんでした。別ドメインに非同期でリクエストするためにいくつかの方法が考えられましたが詳しい説明は省略します。(一旦サーバを経由する・Flashを経由する・JSONPを使うなど) 2009年になりXMLHttpRequest
[WebStorm]JavaScriptファイルをMinifyする(Source Maps対応) | バシャログ。
日頃から愛用してるIDEのPhpStorm 6 がリリースされました。JavaScriptにコンパイルされる系の言語のサポートが強化されたのが目立ちますね。 今日は、6の新機能というわけではないですが、WebStormを使ってJavaScriptファイルをMinifyする方法について紹介します。 概要 WebStormでjsファイルを編集したら自動的にMinifyされるようにします。JavaScriptにおいてMinifyとは余計な空白をとったり変数名を短くしたりして、機能的動作を変えずにJavaScriptのファイルサイズだけ小さくすることをいいます。今回はClosure Compilerを使います。 インストール まず、Minifyを実行するプログラムをダウンロードします。Getting Started with the Closure Compiler Applicationからリン
![[WebStorm]JavaScriptファイルをMinifyする(Source Maps対応) | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/e09ad8f655ea0962c3fc07c12b65c5a618375e0d/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_tools.png)
[Sublime Text2]SublimeLinter+jshintでJavaScriptコードを自動チェック | バシャログ。
最近、JavaScriptの新刊が本当に増えててうれしいなーと思うtanakaです。Web+DB PRESS vol.73 の連載で、JavaScriptのユニットテストについて書かれていたのを読みました。主に3つのツール・ライブラリが紹介されていましたが、中でも複数のブラウザに対して一斉にテスト実行させるtestemがすごい便利そうです。以前、同様のツールであるjsTestDriverをバシャログで紹介しましたが、testemはnpmコマンドでインストールしたらすぐテストを書き始められるし、設定を書けば、自動でブラウザを起動してくれるので楽でした。(Windows,Macともに導入できました)テスト書きたいと思っている方がいましたら是非読んでみてください。 さて、testemはまだあんまりいじってないので、今日は JavaScript のコードをjshintというツールでチェックする方法
ライブラリを使わないでDOMにアクセスするJavaScriptを書いたときにはまった2つのこと | バシャログ。
タスク管理するのに手帳を使おうとして2週間で挫折したので、iPhone & Mac でできないか挑戦している tanaka です。 最近、諸事情により jQuery などのライブラリ を使わずに DOM を操作する JavaScript コードを書く機会がありました。ある程度はライブラリなしで書いたこともあるし、そんな大変じゃないだろう…と思っていたら、想定外に時間がかかってしまいました。(多くはレガシーなIE対応ですが…)そんなわけで、ライブラリを使わないで JavaScript を書いたときに遭遇した問題2つを紹介します。サンプルコードはQUnitでテストを書き、テスト実行＋コードリーディングすることでIEとそれ以外のブラウザの違いが理解できるようにしました。 IE 7以下で setAttribute('class', [classNames])/getAttribute('class
2012 年バシャログ。人気エントリーまとめ [デザイナー・コーダー編] | バシャログ。
年末ですね。お正月に向けて冬眠の準備を始めた seki です。 昨日に続きまして、バシャログ。1 年の人気記事まとめをお送りいたします。 振り返ってみると、今年の流行がまるわかり！復習もかねてフムフムと読み返してみて下さい。 バシャログ。2012 年人気エントリーまとめ [デザイナー・コーダー編] 様々なイケてるUIを参考にできるサイト Google HTML/CSS Style Guide の推奨ガイドラインまとめ web高速化のためのコーダー向け圧縮ツール・サービスまとめ 【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた Illustrator の時間短縮！ウェブやチラシで使うアクセスマップの作り方 【WordPress】お問い合わせ内容も管理画面で管理できてトレビア～ンなフォームプラグインinquiry form creator フォームを改めて考え
![2012 年バシャログ。人気エントリーまとめ [デザイナー・コーダー編] | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/53143fc321ea2d6c3b8d026b6dd8433bd6a625f6/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_webdesign.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【急募】フロントエンドエンジニア / マークアップエンジニア募集！ | バシャログ。
【2013年版】どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました その2 | バシャログ。
