新MacBook ProにインストールしたMacアプリ24
新MacBook ProにインストールしたMacアプリ24 数年使ったMacBook AirをMacBook Proに変更しました。いろいろなアプリをクリーンインストールしたのでインストールしたアプリをまとめて紹介します。 Google Chrome 最近は日常のブラウジングでも開発でもほとんどGoogle Chromeを利用しているので、まずはこれをインストールしないと始まりません。 Firefox 検証用などでたまに利用するのでFirefoxもインストール。 Thunderbird 7年近く使っているメールソフト。何度か他のメールソフトに乗り換えようかと思ったけど結局移行できず。スマホなどの他デバイス用にGmailと併用して使っています。 1Password これまで共通パスワードを使いまわしてたけど、昨年はAdobeとか情報流出が多くて心配になったので導入したパスワード管理ソフト。i
新MacBook ProにインストールしたCUIアプリ
新MacBook ProにインストールしたCUIアプリ 新MacBook ProにインストールしたMacアプリ24に続いて、インストールしたCUIアプリもご紹介。 Homebrew Mac用のパッケージ管理ソフト「Homebrew」。ターミナルから以下のコマンドを入力するとインストールできます。Gitがインストールされてないとインストールできないと思うので、事前にXcodeをインストールしておきましょう。（Homebrewのインストール中にコマンドラインツールのインストール画面が表示されると思います。） ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" インストール後に以下のコマンドでインストールされたバージョンが確認できます。 brew -v rbenv Rubyのバージョン管理ソフト「
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
Web Developerで行うCSSデバッグ
Web Developerで行うCSSデバッグ Web Developerはナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。 インストール Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。 インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてイン
Firebugで始めるCSSデバッグ
Firebugで始めるCSSデバッグ FirebugはWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。CSSデバッグに関してはWeb Developerよりこちらを使っている人のほうが多いと思います。個人的にもFirebugなしでCSSは書きたくないと思うぐらい重宝しています。 インストール Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。 インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。 Firebugの使い方 Firebugをインストールするとブラウザの右下に
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」 FirefoxのアドオンFirebugを利用することで効率的なCSSデバッグが可能になる。ただし、このFirebugはIEなどFirefox以外のブラウザでは利用することが出来ない。しかしFirebugではFirefox以外でも利用できるFirebug Liteが提供されている。 Firebug LiteはIE6以上, Firefox, Opera, Safari そしてGoogle Chromeなどほとんどのブラウザで利用可能です。 オリジナルのFirebugと比較すると機能が限定されているがCSSデバッグには十分利用できるでしょう。 Firebug Liteの利用方法 Firebug Liteはブックマークレットとして提供されています。ブックマークレットとはサイト上で任意のJavaScriptを実行する機能で
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
iPhone用CSSをメディアクエリで分岐する問題点
iPhone用CSSをメディアクエリで分岐する問題点 これまで1つのHTMLソースでPC用とiPhone用のスタイルシートを切り替えるテクニックとしてCSS3のメディアクエリが用いられることが多かったのですが、iPhone 4の登場によりこのテクニックはバッドノウハウになりつつあります。 追記(2010/07/09) 本エントリーはiPhone 4の発売前に書いたものです。 iPhone 4のSafariに関しては画面サイズが320×480として計算されている為、問題ないようです。 参考：Fonland: iPhone 4 の viewport は iPhone 3G と同じ これまでは次のようなコードでiPhone用にiphone.cssをそれ以外のデバイスにimport.cssを読み込むことが出来ました。 <link media="only screen and (max-device
jQueryにおける:first-childと:firstの違い
jQueryにおける:first-childと:firstの違い jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。 例えば、次のようなHTMLがあるとします。 <ul> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> <li>list1-4</li> </ul> <ul> <li>list2-1</li> <li>list2-2</li> <li>list2-3</li> <li>list2-4</li> </ul> :first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。 $("li:first-child").css("color","red"); サンプル 一方:f
MTでカスタムフィールドの表示順をベースネーム順に変更するプラグイン「CustomSort」
MTでカスタムフィールドの表示順をベースネーム順に変更するプラグイン「CustomSort」 MTの投稿画面でカスタムフィールドの表示順をベースネーム順に変更するプラグインを作成したので公開しておきます。 custumSort.zip MT5対応版はこちら 「CustomSort5」 利用方法は解凍した「custumSort.pl」をmtディレクトリ内のpluginsにアップしてください。 MTには標準でカスタムフィールドの並び順を制御する機能があるので、基本的にはこのプラグインが必要になることはありません。 表示オプションで、カスタムフィールドの項目をドラックすることにより並び順を変更することができます。 ただ、カスタムフィールドを作ったり消したり色々とゴニョゴニョしていると、この並び替え機能が動作しなくなります。 そうなった際にCustomSortを利用するとベースネーム順に並びかえる
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
[ASCII.jp]IE6対応！jQueryで透過PNGのロールオーバーを作る
[ASCII.jp]IE6対応！jQueryで透過PNGのロールオーバーを作る ASCII.jpの連載「Web制作の現場で使えるjQuery UIデザイン入門」で第18回 IE6対応！jQueryで透過PNGのロールオーバーを作るが公開されました。 ロールオーバーメニューを利用しjQueryで透過pngを取り扱う方法について解説しています。 興味があるかたは是非ごらんになってください。 関連エントリー jQueryでロールオーバー！プリロード対応版 透過PNG対応！jQueryでオリジナルツールチップ jQueryでタブパネルを作るチュートリアル jQueryでアコーディオンパネルUIを自作する jQueryで作る画像ギャラリーのチュートリアル CSS3のセレクターで作るストライプテーブル jQueryによるアニメーションエフェクトの基本 jQueryでAjaxを利用する基本チュートリアル
画面の下部にフッターを表示する
画面の下部にフッターを表示する 動的サイトで画面の下部にフッターを表示する事は非常に困難です。 さまざまなパターンを想定してフッターを設定することになります。 コンテンツ領域がブラウザの高さより高い場合 この場合、通常の方法で問題なく表示できます。 サンプル（コンテンツのheight:1000px） ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します サンプル（コンテンツのheight:100px） コンテンツ領域がブラウザの高さより低い場合 この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。 サンプル ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示
alphafilter.jsが透過pngのロールオーバーに対応
alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />
Firefox3とESET Smart Securityでアドオンが更新できない際の対応方法
Firefox3とESET Smart Securityでアドオンが更新できない際の対応方法 最近Firefoxでアドオンを更新しようとすると以下のようなエラーが出るようになりました。 「Firefox はファイルをインストールできませんでした。 URL = http://releases.mozilla.org/pub/mozilla.org/addons/1843/firebug-1.4.2-fx.xpi 原因: ダウンロードのエラー - 228」 対応方法を調べたところどうもウイルス対策ソフトの「ESET Smart Security 」が原因のようでした。 詳細設定の「パーソナルファイアウォール」の「プロトコルフィルタリング」で「アプリケーションプロトコルフィルタリングを有効にする」のチェックを外せばエラーが出なくなります。 関連エントリー 非常に軽いウイルス対策ソフト『イーセット
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
Google Maps API ルート案内API
Google Maps API ルート案内API すごく個人的に待望だったのですが、Google Maps API にルート案内APIが追加されました。 例えば川口から銀座へのルートを表示したい場合には以下のように記述します。 function load() { map = new GMap2(document.getElementById("map")); directions = new GDirections(map); var points = new Array(); points.push(new GLatLng(35.79866644,139.72077689));//川口の経度緯度 points.push(new GLatLng(35.66888889,139.76777778));//銀座の経度緯度 directions.loadFromWaypoints(points)
MTで特定の文字数以降を「...」とトリミングする方法
MTで特定の文字数以降を「...」とトリミングする方法 何文字以降は「...」と省略するのは、よくあるケースだと思います。 MTの場合、trim_toモディファイアを利用すれば何文字以降をトリミングすることは可能です。 また、何文字以上の場合にトリミングを行うと言う処理は、count_charactersモディファイアで文字数を取得しmtifで条件分岐することにより可能です。 合わせるとこんな感じ。 <mtentrybody strip_tags="1" count_characters="1" setvar="countbody"> <mtif name="countbody" gt="70"> <mtentrybody strip_tags="1" trim_to="70">... <mtelse> <mtentrybody strip_tags="1"> </mtif> 関連エントリ
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
