Design - シドニーで働くプログラマーのBlog(今はIT会社の経営者)

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

Mar 23, 2015

AD:

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

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

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

drush en bootstrap_library respondjs -y

1	drush en bootstrap_library respondjs -y

CSS&JSのAggregate and compress化

下記のページより変更が可能です。
/admin/config/development/performance

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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

Feb 22, 2013

AD:

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

$ gem install less
$ less --version
less 444
Copyright (C) 1984-2009 Mark Nudelman

1

2

3

4

$ gem install less

$ less --version

less 444

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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

デザイン時によく使います。重宝しています。

Firebug

If you make web site and web system,you should use it.
It is so useful.

FireQuery

jQueryの開発に重宝しています。

FireCookie

開発時にCookieの確認＆管理に重宝しています。

FireGestures

タブブラウザといえばマウスジェスチャーがなければ始まらない。むしろ必須と言えよね。

faviconize

タブをたくさん開くのでこれで整理したりします。
ぼくの設定

http://delicious.com/AyumiMizoshiri
http://fastladder.com/reader/
http://www.rememberthemilk.com/home/*
http://mail.google.*/
http://blog.mizoshiri.com//
https://www.google.*/analytics/
http://*.facebook.com/

1

2

3

4

5

6

7

http://delicious.com/AyumiMizoshiri

http://fastladder.com/reader/

http://www.rememberthemilk.com/home/*

http://mail.google.*/

http://blog.mizoshiri.com//

https://www.google.*/analytics/

http://*.facebook.com/

Flagfox

IPからサーバの置いてる国がわかります。（趣味ですね）

Gmail Manager

It can manage to use Gmail.

Greasemonkey

Allows you to customize the way a webpage displays using small bits of JavaScript.

AutoPagerize
Google result number
Google Page Rank
Displays pagerank in web search results of Google.
よく会社で質問されるので、入れておきます。
Google Reader Subscribers Count
Shows how many subscribers to the feed with google reader.
Google+SBM
Google 検索結果にソーシャルブックマーク件数を付けてくれます

LDR Counter

blogなどで、どれくらいの人が読んでるか調べるのに使っています。

SBMカウンタ

なんだかんだで気になるだな・・・これがブックマークのカウンターです

Selenium

テストのときによく使いいます。
このおかげでどれだけ、時間を節約できたことか。。。。必須ツールです。

Screengrab!

毎日トラフィックのログを残すのに使用しています。

Speed Dial

もともとOpera使っていたので、この機能は入れておきました。

SSLPersonas

SSLの接続の確認に、Firefoxだと確認しにくいので、利用しています。

Tabmix

たまに使っています。

WebDeveloper

js、cssなどを、無効に利用しています。

Yslow

ページパフォーマンス計測ツール、いろいろ計測結果を元にいろいろと勉強させてもらっています。

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 1 | Pocket: 1 | Total: 2 | Feedly: 0

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

Feb 11, 2012

AD:

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

$ sudo gem install less 
Successfully installed libv8-3.3.10.4-x86-linux
Successfully installed therubyracer-0.9.9
Successfully installed commonjs-0.2.0
Successfully installed less-2.0.9

1

2

3

4

5

$ sudo gem install less

Successfully installed libv8-3.3.10.4-x86-linux

Successfully installed therubyracer-0.9.9

Successfully installed commonjs-0.2.0

Successfully installed less-2.0.9

lesscの場所を確認

$ locate lessc
/var/lib/gems/1.8/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc

1

2

3

4

$ locate lessc

/var/lib/gems/1.8/bin/lessc

/var/lib/gems/1.8/gems/less-2.0.9/bin/lessc

/var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc

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

$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

1	$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

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

$ lessc hoge.less &gt; hoge.css
/usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (&gt;= 0) (Gem::LoadError)
	from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate'
	from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem'
	from /usr/bin/lessc:18

1

2

3

4

5

$ lessc hoge.less > hoge.css

/usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (>= 0) (Gem::LoadError)

from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate'

from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem'

from /usr/bin/lessc:18

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

$ sudo lessc hoge.less &gt; hoge.css

1	$ sudo lessc hoge.less > hoge.css

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

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

$ cd ./wp-content/themes/roots/css/less
&#20840;&#20307;
$ sudo lessc bootstrap.less &gt; bootstrap.css
&#12524;&#12452;&#12450;&#12454;&#12488;&#31995;
$ sudo lessc responsive.less &gt; bootstrap-responsive.css

1

2

3

4

5

$ cd ./wp-content/themes/roots/css/less

全体

$ sudo lessc bootstrap.less > bootstrap.css

レイアウト系

$ sudo lessc responsive.less > bootstrap-responsive.css

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

$ sudo lessc ./less/bootstrap.less &gt; bootstrap.css
$ sudo lessc bootstrap.less &gt; ../css/bootstrap.css

1 2	$ sudo lessc ./less/bootstrap.less > bootstrap.css $ sudo lessc bootstrap.less > ../css/bootstrap.css

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

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 1 | Pocket: 0 | Total: 1 | Feedly: 0

Firefoxの使用アドオン in 2011

Jul 25, 2011

AD:

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

FireMobileSimulator

携帯端末のHTTPリクエスト、絵文字表示をシミュレートします。

ColorZilla 2.0

デザイン時によく使います。重宝しています。

Firebug

If you make web site and web system,you should use it.
It is so useful.

FireQuery

jQueryの開発に重宝しています。

FireCookie

開発時にCookieの確認＆管理に重宝しています。

FireGestures

タブブラウザといえばマウスジェスチャーがなければ始まらない。むしろ必須と言えよね。

faviconize

タブをたくさん開くのでこれで整理したりします。
ぼくの設定

http://delicious.com/AyumiMizoshiri
http://fastladder.com/reader/
http://www.rememberthemilk.com/home/*
http://mail.google.*/
http://blog.mizoshiri.com//
https://www.google.*/analytics/
http://*.facebook.com/

1

2

3

4

5

6

7

http://delicious.com/AyumiMizoshiri

http://fastladder.com/reader/

http://www.rememberthemilk.com/home/*

http://mail.google.*/

http://blog.mizoshiri.com//

https://www.google.*/analytics/

http://*.facebook.com/

Flagfox

IPからサーバの置いてる国がわかります。（趣味ですね）

Gmail Manager

It can manage to use Gmail.

Greasemonkey

Allows you to customize the way a webpage displays using small bits of JavaScript.

AutoPagerize
Google result number
Google Page Rank
Displays pagerank in web search results of Google.
よく会社で質問されるので、入れておきます。
Google Reader Subscribers Count
Shows how many subscribers to the feed with google reader.
Google+SBM
Google 検索結果にソーシャルブックマーク件数を付けてくれます
Google Analytics with SBM
Add Social Media Counter (Hatena Bookmark, Twitter, Facebook) besides the outer url Link

LDR Counter

blogなどで、どれくらいの人が読んでるか調べるのに使っています。

SBMカウンタ

なんだかんだで気になるだな・・・これがブックマークのカウンターです

Selenium

テストのときによく使いいます。
このおかげでどれだけ、時間を節約できたことか。。。。必須ツールです。

Screengrab!

毎日トラフィックのログを残すのに使用しています。

Speed Dial

もともとOpera使っていたので、この機能は入れておきました。

SSLPersonas

SSLの接続の確認に、Firefoxだと確認しにくいので、利用しています。

Tabmix

たまに使っています。

WebDeveloper

js、cssなどを、無効に利用しています。

Yslow

ページパフォーマンス計測ツール、いろいろ計測結果を元にいろいろと勉強させてもらっています。

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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

Jan 25, 2010

AD:

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

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

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

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

FireRainbow 1.0
IE Tab 1.5.2
Live HTTP header 0.15
Tab Mix Plus 0.3.7
Window Resizer 1.0

1

2

3

4

5

FireRainbow 1.0

IE Tab 1.5.2

Live HTTP header 0.15

Tab Mix Plus 0.3.7

Window Resizer 1.0

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:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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

Sep 23, 2009

AD:

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

サンプル

画像を一枚にまとめます

使用した画像

htmlのソース

&lt;p class="rollover"&gt;&lt;a href="#"&gt;&#12522;&#12531;&#12463;&lt;/a&gt;&lt;/p&gt;

1	<p class="rollover"><a href="#">リンク</a></p>

CSS

p.rollover a{
	display:block;
	width:150px;
	height:50px;
	text-indent:-9999px;
	overflow:hidden;
}
p.rollover a{
	background:url(rollover.jpg) top left no-repeat;
}
p.rollover a:hover{
	background:url(rollover.jpg) top right no-repeat;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

p.rollover a{

display:block;

width:150px;

height:50px;

text-indent:-9999px;

overflow:hidden;

}

p.rollover a{

background:url(rollover.jpg) top left no-repeat;

}

p.rollover a:hover{

background:url(rollover.jpg) top right no-repeat;

}

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:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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に下記の内容で取得することができます。

_level0.&#22793;&#25968;&#21517;

1	_level0.変数名

実際のサンプル

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

sample

html側

flashvarsに渡す値を、PHPで変更しております。
ｈｔｍｌ側の表示部分で、ＰＨＰなどと連携して、ＧＥＴ,POSTなりのデータをFlashにわたします。

&lt;object width="300" height="200"  align="middle"&gt;
&lt;param name="movie" value="test.swf" /&gt;
&lt;param name="FlashVars" value="category=&lt; ?=$_GET['category']; ?&gt;"&gt;
&lt;param name="quality" value="high" /&gt;
&lt;embed src="test.swf" FlashVars="category=&lt; ?=$_GET['category']; ?&gt;" quality="high" width="300" height="200" name="myflashvars"  /&gt;
&lt;/object&gt;

1

2

3

4

5

6

</object>

Flash側

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

if (_level0.category =='1') {
    myTxt.text = "&#12459;&#12486;&#12468;&#12522;&#12540;1";
&#12288;&#12288;gotoAndStop(2);//&#12459;&#12486;&#12468;&#12522;&#12540;&#12364;1&#12398;&#12392;&#12365;&#12399;2&#12501;&#12524;&#12540;&#12512;&#12414;&#12391;&#39131;&#12400;&#12375;&#12390;&#12356;&#12427;&#12290;
} else if (_level0.category =='2') {
    myTxt.text = "&#12459;&#12486;&#12468;&#12522;&#12540;2 ";
	gotoAndStop(3);//&#12459;&#12486;&#12468;&#12522;&#12540;&#12364;2&#12398;&#12392;&#12365;&#12399;3&#12501;&#12524;&#12540;&#12512;&#12414;&#12391;&#39131;&#12400;&#12375;&#12390;&#12356;&#12427;&#12290;
}

1

2

3

4

5

6

7

if (_level0.category =='1') {

myTxt.text = "カテゴリー1";

　　gotoAndStop(2);//カテゴリーが1のときは2フレームまで飛ばしている。

} else if (_level0.category =='2') {

myTxt.text = "カテゴリー2 ";

gotoAndStop(3);//カテゴリーが2のときは3フレームまで飛ばしている。

}

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

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 5 | Pocket: 0 | Total: 5 | Feedly: 0

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

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

CSS&JSのAggregate and compress化

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

Firefoxの使用アドオン in 2012

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

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

解決方法

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

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

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

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

Firefoxの使用アドオン in 2011

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

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

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

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

画像を一枚にまとめます

Robert Slimbachのfonts

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

Robert Slimbachとは

Robert Slimbachの経歴

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

FlashVars

html側の設定

Flash側

実際のサンプル

html側

Flash側

Search Keyword

Meta

FacebookPage

Popular Posts

My Tags

Status

Links

ARCHIVES