Drupal7にTwitter Bootstrap3 – Themeの環境でIE8をサポートする

Mar 23, 2015
AD:

本来であれば、Twitter Bootstrap3はIE8をサポートしているはずなんですが、なぜかDrupalのTwitter Bootstrap Themeを使用するとIE8でうまくいきませんでした。
下記の内容で問題なく表示されるようになりました。
原因はIE8がCDNをサポートしていないのが問題ではないかと言われていますが、実際のところなぜ起きるのかは追っていません。

モジュールのインストール

下記の2つのモジュールをインストール
Bootstrap Library
Respond.js

CSS&JSのAggregate and compress化

下記のページより変更が可能です。
/admin/config/development/performance
Screen Shot 2015-03-23 at 11.08.28 am

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 26

Ubuntu(12.04) にlessをインストール

Feb 22, 2013
AD:

過去のサイトで、Lessを使用しているものがあったので、lessをインストール

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 26

Firefoxの使用アドオン in 2012

Sep 14, 2012
AD:

2012年のFirefoxのプラグインをまとめておきます。
今年いっぱいは、ここに情報を追加していこうとおもい思います。

rapportive
Rapportive shows you everything about your contacts right inside your inbox(Gmail).
diigo
For bookmarks.
LastPass
For saving Password
ColorZilla 2.0 ColorZilla 2.0
デザイン時によく使います。重宝しています。
Firebug Firebug
If you make web site and web system,you should use it.
It is so useful.
FireQuery FireQuery
jQueryの開発に重宝しています。
FireCookie FireCookie
開発時にCookieの確認&管理に重宝しています。
FireGestures
タブブラウザといえばマウスジェスチャーがなければ始まらない。むしろ必須と言えよね。
faviconize faviconize
タブをたくさん開くのでこれで整理したりします。
ぼくの設定 
flagfox Flagfox
IPからサーバの置いてる国がわかります。(趣味ですね)
Gmail Manager Gmail Manager
It can manage to use Gmail.
Greasemonkey Greasemonkey
Allows you to customize the way a webpage displays using small bits of JavaScript.

LDR Counter LDR Counter
blogなどで、どれくらいの人が読んでるか調べるのに使っています。
SBMカウンタ SBMカウンタ
なんだかんだで気になるだな・・・これがブックマークのカウンターです
selenium Selenium
テストのときによく使いいます。
このおかげでどれだけ、時間を節約できたことか。。。。必須ツールです。
Screengrab! Screengrab!
毎日トラフィックのログを残すのに使用しています。
Speed Dial Speed Dial
もともとOpera使っていたので、この機能は入れておきました。
SSLPersonas SSLPersonas
SSLの接続の確認に、Firefoxだと確認しにくいので、利用しています。
tabmix Tabmix
たまに使っています。
WebDeveloper WebDeveloper
js、cssなどを、無効に利用しています。
Yslow Yslow
ページパフォーマンス計測ツール、いろいろ計測結果を元にいろいろと勉強させてもらっています。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 26

lessで@importしたらcacheが残って変更が反映されない件

Feb 13, 2012
AD:

WordPressのRoots Themeの中でlessが使われているのですが、ちょっとトラブったのでそのメモです。

問題は、lessの@importしたらcacheが残って変更が反映されない

それで、調べると同じような問題に起きている人がいる模様。
https://github.com/cloudhead/less.js/issues/47

解決方法

結局、下記のスクリプト追加して解決できました。
[php]
[/php]

ちなみに、bootstrap.lessの中はこんな感じです。

[php]
// CSS Reset
@import “reset.less”;

// Core variables and mixins
@import “variables.less”; // Modify this for custom colors, font-sizes, etc
@import “mixins.less”;

// Grid system and page structure
@import “scaffolding.less”;
@import “grid.less”;
@import “layouts.less”;
[/php]

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 1 | Pocket: 1 | Total: 2 | Feedly: 26

Ubuntuにlessをインストール&設定

Feb 11, 2012
AD:

最近、WordpressのRoots Themeを触っているのですが、その中でlessが使われていたのでそのメモ

lesscの場所を確認

コマンドを入力させやすくしておく

: Could not find RubyGem less と出てエラー

調べてみると、sudoでインストールしたので、lesscのコマンドもsudoで実行しないといけないらしい。。。

既に、Rubyの開発環境はrvmで導入済みの状態です。

せっかくなので、Roots Themeのlessでのcssを書き出しもメモしておきます。

ちなみに、上のRoots Themeは、標準では、css/の中にあるcssを読み込むんですが、下記のやり方だとlessの中に書き出されます。

上記のコマンドを試したけどダメだったので、./inc/roots-actions.phpを書き換えました。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 1 | Pocket: 0 | Total: 1 | Feedly: 26

Firefoxの使用アドオン in 2011

Jul 25, 2011
AD:

2011年のFirefoxのプラグインをまとめておきます。
最近いろいろなとこに端末ができたり、人のパソコン(開発用)を設定しないといけないので、メモとしてのこしておきます。
今年いっぱいは、ここに情報を追加していこうとおもい思います。

FireMobileSimulator FireMobileSimulator
携帯端末のHTTPリクエスト、絵文字表示をシミュレートします。
ColorZilla 2.0 ColorZilla 2.0
デザイン時によく使います。重宝しています。
Firebug Firebug
If you make web site and web system,you should use it.
It is so useful.
FireQuery FireQuery
jQueryの開発に重宝しています。
FireCookie FireCookie
開発時にCookieの確認&管理に重宝しています。
FireGestures
タブブラウザといえばマウスジェスチャーがなければ始まらない。むしろ必須と言えよね。
faviconize faviconize
タブをたくさん開くのでこれで整理したりします。
ぼくの設定 
flagfox Flagfox
IPからサーバの置いてる国がわかります。(趣味ですね)
Gmail Manager Gmail Manager
It can manage to use Gmail.
Greasemonkey Greasemonkey
Allows you to customize the way a webpage displays using small bits of JavaScript.

LDR Counter LDR Counter
blogなどで、どれくらいの人が読んでるか調べるのに使っています。
SBMカウンタ SBMカウンタ
なんだかんだで気になるだな・・・これがブックマークのカウンターです
selenium Selenium
テストのときによく使いいます。
このおかげでどれだけ、時間を節約できたことか。。。。必須ツールです。
Screengrab! Screengrab!
毎日トラフィックのログを残すのに使用しています。
Speed Dial Speed Dial
もともとOpera使っていたので、この機能は入れておきました。
SSLPersonas SSLPersonas
SSLの接続の確認に、Firefoxだと確認しにくいので、利用しています。
tabmix Tabmix
たまに使っています。
WebDeveloper WebDeveloper
js、cssなどを、無効に利用しています。
Yslow Yslow
ページパフォーマンス計測ツール、いろいろ計測結果を元にいろいろと勉強させてもらっています。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 26

Firebug1.5がうまく動かった時の対策例

Jan 25, 2010
AD:

Firebug1.5が出ていたので、インストールしたら、微妙に動作だったので、調べて対策しました。
Firebug1.5

あくまでも、僕の環境下のでの対策なのですべて対応すると限らないのであしからず。

Firefox3.6に上げてみようと試みる

でも、下記のプラグインが対応していないのようなので断念

FireQuery 0.3のバジョーンを上げる

Firebug1.6や1.7のWikiを読んでいたら、FireQueryの低いVersionを入れていたら不具合を生じることが書いてあったので
FireQueryを0.3だったのを0.5に上げてみる。
FireQueryは、実験的なアドオンらしくまだアップデートの通知が自動で配信されていないようで、0.2も上がっていたのは驚きでした。

で、FireQuery 0.3をFireQuery 0.5に上げてみる。

これでFirebug1.5が正常に動作するようになりました。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 26

CSSによる画像ロールオーバーのちらつきを防ぐ方法

Sep 23, 2009
AD:

最近、久しぶりデザインをすることが増えたので、CSSを触っているんですが
CSSを使って画像ロールオーバー使うことがあるのですが、それが画面を開いた段階では、a:hoverに指定した画像を読み込みに行ってくれなくて
困っておりました。そこで下記方法を思いつき対応しました。

サンプル

画像を一枚にまとめます

使用した画像
rollover

htmlのソース

CSS

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 26

Robert Slimbachのfonts

Aug 17, 2009
AD:

robertslimbach

Adobeのユーザ登録特典はSanvito Pro

AdobeのCS4を導入しているんですが、先日Adobeのユーザ登録をおこなったところ、ユーザ登録特典としてフォントをいただけました。
そのフォントは、Robert Slimbachが作者のSanvito Proです。

Robert Slimbachとは

Robert Slimbachという名前は今回はじめて知ったのですが、検索してみるとフォントデザイナーとして有名なかたなようで、
作品をしらべてみると、ぼくがよく利用する「Myriad Pro」の作者だったとは、これは驚きました。
そこで、ぼくのPCの中にはいっているfontを調べてみると、4つも彼の作品が入ってました。これもまた驚きました。

  • Gramond
  • Myriad Pro
  • Minion Pro
  • SanvitoPro

Robert Slimbachの経歴

http://www.identifont.com/show?17Z
Adobeで働いていたんですね。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 26

FlashでGET、POSTの情報を取得する方法

Oct 16, 2008
AD:

FlashVars

Flash側で直接、GET、POSTは取得できないようなので、「FlashVars」を使用します。

html側の設定

FlashVarsは、Flashを読む込ませるファイルにかく<param>や<object>の中に下記のように指定します。

Object タグの例:
<PARAM NAME=FlashVars VALUE=”hoge=hoge is hoge”>

Embed タグの例:
<EMBED src=”display.swf”
FlashVars=”hoge=hoge is hoge”> </EMBED>

参考サイト
http://support.adobe.co.jp/faq/faq/qadoc.sv?228618+002

Flash側

ActionScriptに下記の内容で取得することができます。

実際のサンプル

GETのcategoryの値によって表示する内容を変更するFlashの場合

sample

html側

flashvarsに渡す値を、PHPで変更しております。
html側の表示部分で、PHPなどと連携して、GET,POSTなりのデータをFlashにわたします。

Flash側

actionscriptに下記の内容を記述
category が1だったら

sampleのダウンロードはこちらから

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 5 | Pocket: 0 | Total: 5 | Feedly: 26

ARCHIVES