サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
コーヒー沼
ginpen.com
この記事はJavaScriptおれおれAdvent Calendar 2013の4日目の記事です。 ブックマークレットてご存じですか? ブックマークにJavaScriptを登録して、あれこれの機能を使おうというものです。 説明ははてなのページがわかりやすそう。 ブックマークレット – はてな Mobile Safariでも利用する事が出来ます。 例えば ウェブページのタイトルとURLをコピーしやすく提示 何かのページを見ていてTwitterに流したいなーってときに使ってます。 javascript:prompt(”,document.title+’ ‘+location.href);void 0 みてる / Web Components/Polymerを軽く触ってみる | inkdesign http://t.co/iW2c1XzEdV — 高梨ギンペイ (@ginpei_jp) 2013
JavaScriptおれおれAdvent Calendar 2013の3日目の記事です。 何か要素に対する処理を行う場合はdocument.querySelector()あたりで検索してくるのですが、一部の要素については事前に取得済みだったりします。 <body>を取るならdocument.bodyで document.bodyには最初から<body>要素が格納されています。個人的にはHTMLElementのインターフェイスを確認するために適当な要素を得る際にこれを使っていたりします。 同様に<head>要素もdocument.headで得る事が出来ます。この二者はHTMLの構文的にも必ず存在するため、事前に確保されているのでしょう。(ちなみにHTMLの文法的には、この二者のタグは省略可能です。その場合でも記述が省略されただけで実際はあるものとして扱われます。) <html>を取るならdo
元ネタ Googleが出している統計を利用しています。 Chromium Dashboard 自動収集される膨大な情報を即時解析し、直近二十四時間分のCSSプロパティ利用統計を見せてくれる。 Google Chromeには使用統計を自動的に送信する仕組みが組み込まれています。 「設定>機能>詳細設定を表示…>プライバシー>使用統計データや障害レポートを自動的に Google に送信する」がそれです。たぶん。 で、この機能で送信されてきた統計情報のうち、CSSプロパティの利用状況についての情報が上記のものです。あ、なのでたぶんページ単位ではなく閲覧単位です。よく見られるページで利用されていれば使用率は上がる事でしょう。いずれにしろ人気度という観点で問題ないと考えています。 ちなみにCSS以外の統計情報もありそうなんですが、本記事執筆時点ではまだ公開されていないようです。 第1位はwidth、
JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認すると c1: attr=undefined prop=true c2: attr=checked prop=false というわけで .attr() … 変わらない .prop() … 変わる(こっちを使う) 仕組み .attr()はattribute、つまり(HTMLの)属性を得るメソッドです。HTMLにのタグにchecked属性を記載したらその値checkedが得られます。していなければ、存在し
JavaScriptおれおれAdvent Calendar 2013 – 01日目 いよいよ始まりました。初日はこのメソッドから始めましょう。 今時の開発だとまずjQueryを使っていると思うのですが、ちょっとした開発(あるいはデバッグ)でjQueryを導入するのも面倒だなーという時に便利なメソッドです。 document.querySelector() というわけでこのdocument.querySelector()を使うと、セレクターを使って要素検索をする事が出来ます。 <ul id="list"> <li class="current"><a href="/home">ホーム</a></li> <li><a href="/tags">タグ</a></li> <li><a href="/categories">カテゴリー</a></li> </ul> 古いやり方だとdocument.g
ひとりAdvent Calendarも三年目となりました。一昨年もJavaScriptをやったのですが、コアJavaScript (ECMAScript) についての話題でした。今年はフロント側の、まあ一般に言うところのJavaScriptについてやりたいと思います。 DOMとかそういう話だけではなくて、ついでに開発に関する話もするつもりです。 昨年: CSS おれおれ Advent Calendar 2012やります。ひとりで。 一昨年: JavaScript おれおれ Advent Calendar 2011やります。ひとりで。 一覧 01日目 jQueryが使えない状況でもjQueryみたいにして要素を検索するquerySelector() 02日目 jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。 03日目 Ja
LinuxのCUIでコマンド入力するのは、一度シェルと呼ばれるプログラムが受け付けてからOSに渡し、また結果をOSから受け付けて画面に出力します。またそのシェルにも幾つか種類があり、Linux標準のシェルがbashです。 ……とそのあたりはあまり明るくないんですが(間違ってたらごめんなさい)、要はあの黒い画面で使えるキーボード操作の便利なもの、をまとめてみました。だいたいEmacsのキーバインドと同じみたいです。 凡例 こういう書き方します。 ^X … Ctrlキーを押しながらXを押します。 Esc X … Escキーを押して、離して、Xを押します。 移動 Esc F … この単語へ Esc B … 前の単語へ (F=Forward, B=Backと覚えておくと良いと思います。) これが一番便利。是非覚えていってください! 削除と貼付け ^W … 単語を削除 Esc D … 先頭まで削除
いえーいCSSでぐりぐり動かしてますか! やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のところ、どちらもベンダープレフィクスが必要 頻繁に使われるのは前者でしょうか。 transitionでさくっとアニメーション リンクにカーソルを載せると文字色が変わる、という例。 transitionプロパティで設定します。 値は「変化させたいプロパティの名前」と「変化にかける時間」です。 時間の単位はsで、secondsつまり秒です。 (ちなみにCSSは0.1を.1と記述する事が出来ます。) 複数
2018-05-05追記: Rails 5.0.7で試したけど、この内容で特に問題ないっぽいです。 タネマキの常連さんの松本さんにCarrierWaveてのを教えてもらいました。最近のファイルアップロードはこれがイケてるらしい。 使い方は僕の方で調べたものなんで、もしかしたらおかしいかもしれない。 概要 何それ これこれ。 carrierwaveuploader/carrierwave めんどい そんなあなたのためにシェルスクリプトをご用意致しました。 https://gist.github.com/ginpei/6270837 sedまじ便利。 環境 ruby 2.0.0p247 Rails 4.0.0 準備 アプリ作成
先に結論を述べちゃうと、HTML5におけるstrongは重要性 (importance)を、emは強勢 (emphasis)を表す。強勢って何?ってのは後述しています。 かつてHTML 4.01の場合は単純にemが強調 (emphasis)、strongがより強い強調 (stronger emphasis)でした。 なおどちらもemphasisという単語を使っているんだけれど、この英単語自体が重要性を示す「強調」と、発声時の強弱の強を示す「強勢」と、両方の意味を持っています。HTML 4.01とHTML5では日本語訳を分けているのは、文脈から判断したものです。 重要性 こちらは重要なものである、という事を表します。普通です。ここ試験に出るぞーってやつですね。 吾輩は「猫」である。 すると、きっと試験にこんな問題が出るわけです。 「この物語の語り手である「吾輩」は何者であるか。漢字一字で答え
自分も正直「え、別にブラウザーで見れば良いじゃん?」と思ってたんだけど、想像以上に快適だったので、皆さんにもお薦めしておきますよ。 なにそれ? jQueryやBackbone.js、HTMLにCSS、あるいはRubyやJava、PHPといったもののドキュメントを閲覧するソフトウェアですよ。 事前にダウンロードしておくのでさくさくだし、検索が簡単だから欲しい情報がすぐ手に入るし、グローバルキーボードショートカットなんか設定しておくと一瞬で検索開始できるからお手軽です。 ウェブブラウザーのブックマークから開いて見れば良いじゃん、てな人も一度使ってみてくださいな。 インストールも簡単です。 検索してみたところ。 公式サイト Dash – Documentation Browser, Snippet Manager – Kapeli インストール App Storeからインストールします。公式サイ
iPhone版のサイトを製作する手順ってどうしてますか。いちいちサーバーにアップロードして実機で確認して、問題があれば修正してアップロードして確認して……って面倒ですよね。 そんなときはシミューレーターです。Macでシミューレーターを起動すると、ローカルファイルにアクセス出来ます。またインスペクター(開発者ツール)を使ってPC版の開発のようにデバッグも行えます。 さくっとインストールしてみましょう! なお公式に配付されているのはMac版のみです。あとMac OSのバージョンが古いと利用できません。 インストール手順 こういう順序です。 Apple Xcodeをインストールする(無料) iOSシミューレーターを探す 起動する Xcodeをインストールする Apple謹製のiOSシミューレーターは単体では配付されていません。XcodeというApple社製の統合開発環境に含まれています。というわ
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
ダウンロード リポジトリ … https://github.com/ginpei/jQuery.transform JSファイル … jquery.transform.js なにこれ? CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。 transform ? transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は のような指定になります。 詳しくはこのあたりとか。 transform-CSS3リファレンス jQuery + transformの問題点 jQueryでスタイルを操作する場合は .css()を利用します。 しかし、これはプロパティの名前と値
jQueryより軽量なZepto.jsよりもよっぽど軽量なVanilla JSの紹介です。 (この記事は誤解を招きやすい箇所が含まれているので、よく注意して読んでくださいね。) 公式サイト Vanilla JS http://vanilla-js.com/ Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. 『Vanilla JSは驚異的で強力なJavaScript製アプリケーションのための、高速で軽量、クロスプラットフォームなフレームワークです。』 (いやクロスプラットフォームは嘘だろう、と思うのですが……。) 概要 膨大なシェア、実績 あまり知られていませんが、jQueryをも凌ぐシェアを誇ります。(正
これ行って来ました。 Web先端技術味見部#15 (今回は「ECMAScript6をそろそろ触る」!) : ATND 楽しかった! JavaScript (JS)とECMAScript (ES)の違いとか、そういうのはググってください。 Firefox Auroraが現状ES6最先端ぽい。次点Chromeは chrome://flags から「JavaScript の試験運用機能を有効にする」を有効にして再起動でES6の機能が使えたりするらしい。 Firefoxで メニューのツール>Web開発>スクラッチパッド でスクラッチパッド。なんかコンソールより便利なやつ。 配列内包表記も使えるように。でも見づらいので三項演算子(?:演算子)みたいな扱いになりそうに思った。 サンプルコードいろいろ let ブロックスコープになる。varと有効範囲が異なる。
高梨ギンペイです。本年もよろしくお願い致します。 独立したのが一昨年で、ろくに仕事もせずにいたのですが(笑)、昨年はお陰様で色々お仕事を頂くなどしまして、対外的にはだいぶ成長できたように思います。ただ自身の方はそうでもない感じなので、今年は期待を裏切らない中身を育てたいと思っております。 あと自己啓発とか英会話とか、そういう胡散臭い系のにもちょいと手を出してみようかなと思っています。もう五年くらい早くからやりたかったなー。海外に旅行も行ってみたいですね。 というわけで私個人の話はおしまい。 2012年PV数の多かった記事10件 単純にPV数でだけ見ています。やっぱりJavaScript中心に、フロントエンドの話ばかりですねえ。 1位: IE9をWindows XPにインストール……はできないので、こんな方法はいかがでしょうか。 https://ginpen.com/2011/04/26/i
CSS おれおれ Advent Calendar 2012 – 24日目 CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。 先に結論を申し上げると CSSがあるお陰でJavaScriptが便利に! JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利! というお話です。 なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。(もちろん、あれも楽しいよね!) あ、あとSVGやらも範囲外です。 断定的に申していても、常々例外はあるものです。 JavaScriptで出来る事、出来ない事 JavaScriptそれ自体が出来る事は、あ
CSS おれおれ Advent Calendar 2012 – 23日目 メールとかブログ記事とかの編集画面みたいなのがあって、それをウィンドウいっぱいに表示するとき、ウィンドウに合わせて縦方向に伸ばすのってどうしてますか? JavaScript使っちゃいます? それCSSで出来るよ! ウェブサービスではあんまりないUIだと思うけど、ウェブアプリ的なものだったらよくあるのでは。 概要 ネタバレ。 height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。 高さを100%に出来る場合、出来ない場合について知る 昔書いたのでちらと読んでみてください。 CSSでheight:100%を使う方法について。 一言で言うと、上位要素に高さの
CSS おれおれ Advent Calendar 2012 – 22日目 (ヽ´ω`) oO( また日が昇ってからの更新になってしまった……。 ) 前提:CSSにおけるアニメーションは以下の二種類あります。 Transitions … 変化するもの Animations … 動き続けるもの 今回は前者について取り上げます。後者もいずれ。 概要 transitionは値の変化をアニメーションさせる、という事を指定するものです。 例えば青色をしたリンクにマウスカーソルを乗せると赤色になる、というような場面で、その変化を時間を付けて行わせる事ができます。 常に動き続けているようなアニメーションは、animateの方の領分です。 使える場面 あくまで「変化」を対象にしているため、何らかの(主に利用者の)操作が必要です。 なので、変化する状態を示す擬似クラス(:hoverとか)や、JavaScrip
CSS おれおれ Advent Calendar 2012 – 21日目 セフセフ。 iOSの選択ボタン。HTMLでいうチェックボタン的なもの。”Switch Control”というらしいです。 Switch Control風チェックボックス HTML こんな感じです。 <p> <label class="switch"> <input type="checkbox" /> <span class="label"> <span class="on">ON</span ><span class="separator"></span ><span class="off">OFF</span> </span> </label> </p>
CSS おれおれ Advent Calendar 2012 – 20日目 いわゆるBK (Bad Knowhow) というやつですな。(BKって和製英語の類?) 現象 画像にborderを付けてborder-radiusも付けると、なんかChromeでうまく表示されないんです。 Chrome 23で見た角丸枠線。欠けている。 Firefoxなんかだと正常でした。 回避策 回避策なのですが、borderの代わりにボケなしのbox-shadowだとうまく行く感じです。 枠線に見える影。 デモ
CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );
CSS おれおれ Advent Calendar 2012 – 18日目 チェックボックスと同じ機能を持つボタンです。押すと引っ込んだ状態になり、もう一度押すと出っ張った状態になります。 なんか現実世界のスイッチで使われてたりしますね。あれです。 押すと引っ込むトグルボタン。 デモ 直接隣接接合子+を利用しています。A+Bで「A直後のB」を指す事ができます。 +は隣接兄弟接合子とか言ったりする事もあるみたいです。どういう日本語を充てるべきかわかりませんが、英語だと “Adjacent sibling combinator” です。 そこで:checkedと組み合わせて、「チェックの付いたチェックボックスの直後の<span>」のスタイルを操作しています。 チェックボックス本体はdisplay:noneで非表示にしています。画面には表示されていませんが、先の<span>が<label>の下に配
CSS おれおれ Advent Calendar 2012 – 17日目 例えば商品一覧。float:leftを駆使したりdisplay:inline-blockしたりと苦労が多いですが、表tableを使えたら楽チンですね。 使えたら楽だなーでもHTMLの意味を考えるとアレだよなーってな場合、HTMLのマークアップは適宜行いつつ、CSSでそれを表として扱わせる、という事ができます。 利用可能な環境 モダンブラウザーでは大丈夫。IEは8からサポートしています。 CSS的には2.1からあります。CSS 3でも記載はありますが、現時点では詳細はまだない (forthcoming) ようです。 HTMLのtable HTMLで表tableを書くとこんな感じですね。
CSS おれおれ Advent Calendar 2012 – 16日目 そういえば割と知らないなーと思いまして。だいたいばらばらに設定しちゃうので。 文法 仕様によると、以下のように設定できます。 [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar 長いのでまとめると、こんな感じ。 値(順序一定) スタイル系(順序不定、任意のものを利用可能) font-style … スタイル font-variant … 変形(CSS 2.1のも
訪問済みリンクを示すセレクターです。なお未訪問のリンクは:linkで得られます。 いずれもリンクを前提としているので、要素aの指定は省略して問題ないでしょう。 背景画像を指定するプロパティです。読み込みに時間がかかる場合もあるので、background-colorも一緒に指定しておきましょう。(してないとこ多いんですよね……。) background-positionを使ったCSSスプライトという技術も有名ですね。 プライバシー情報漏洩の仕組み さて閑話休題。この二つを組み合わせて悪用すると、「(他サイトへの)訪問履歴」を得る事が出来てしまいます。 background-imageが:visitedと一緒に使える場合を考えます。 この時に問題になるのが、「画像を読み込む」つまり「画像をウェブサーバーへ要求する」という当たり前の行為です。 要求を受け取ったウェブサーバーは、要求している画像の
CSS おれおれ Advent Calendar 2012 – 14日目 こんな感じのもの。 ネオン風に。 基本 背景色を黒に、文字色を白っぽい色にします。 フォント あとそれっぽいフォントを使いました。 Google Web Fontsの “Grand Hotel” というのを利用しています。 Google Web Fonts Grand Hotel (個別ページってこれで良いのかな。) text-shadowでぼわーんってな テキストに影を付けるやつです。IE 10以上と、モダンブラウザーで利用できます。 影の色を指定できるので、それを文字色と同じ色にすると、ぼやけているように見えます。 影を重ねる text-shadowにひとつだけ指定してもあんまりそれっぽくなかったので、重ねてみました。 影自体が半透過なので、重ねると色が濃くなります。薄くするのは色の指定にアルファ値を含めてやれば
CSS おれおれ Advent Calendar 2012 – 13日目 今日はちょいと視点を変えて見ました。 jQueryの特徴的な機能として「CSSのセレクターを使って要素を検索できる」というのがあります。 ただしjQueryでは独自に拡張してCSS本来のセレクターよりも強力だったりします。逆にjQueryを普段から使っていてたまにCSSを書こうとすると迷う場面もありそうです。 というわけで、jQueryが独自に拡張しているセレクター一覧です。(属性非同値セレクター以外は全部疑似セレクターですね。) 全般 [name!="value"] Attribute Not Equal Selector [name!=”value”] – jQuery API 属性が指定の値でないものを検索します。 .not('[name="value"]')の方が高速です。 意外とこれCSSにないんですよね。
次のページ
このページを最初にブックマークしてみませんか?
『Ginpen.com | Powered by JavaScript and JapaneseSushi』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く