THE HAM MEDIA BLOG

Twitterの公式ツイートボタン・フォローボタンがFirefoxなど特定のブラウザだけ表示がされない場合の対処法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
twitter
Firefox
バグ
ボタン

先日より、Twitter公式のフォローボタンがリリースされていましたけど、そのフォローボタンがリリースされたくらいから、ブログに導入をしていたTwitterのボタンが表示されなくなっていました。

しかし、このブログ意外のサイトでは普通に表示されているところが多いし、Google Chromeでみた時は普通に表示されるという状態・・・なぜ!?

もし同様の問題がある人がいるかと思ったので、この問題の解決方法をかいておきます。

続きを読む

戻り値で関数から値を返すreturnを今一度勉強しなおしてみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
return

JavaScriptとかjQueryとか使っていろいろしてきていたんですが、今一度ちゃんと基礎を勉強&復習しておかないとやばそう。覚えていないこととか多々あるので、基礎から勉強しなおしてみることにしました。

まずは「return」について。戻り値とか値を返すとかはわかるのですが、どう使うの?使いどころは?どうなるの?いろいろやってみた。

続きを読む

表示しているテキストを使ってstyleを追加してみるデモを振り返る

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
jquery
javascript
Replace

先日のエントリー『CSS3のtransitionプロパティでアニメーションを試してみた』で、何気なく作ってみた、ブラウザごとでプレフィックスを変更するボタン。単純に文字の置換で実行されているのですが、その時作ったものを振り返ってみようと思います。

続きを読む

JavaScript OFF環境に優しく? その3

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
CSS

JavaScript OFF環境に優しく? その3

昨日まで、JavaScript OFF環境の人にも優しく(動きはなくとも見られるように)するために、JavaScriptの動的部分に関係するCSSについてはJavaScriptで追加する方法を紹介してきましたが、今回もその続き。

前回はjQueryを使わずにJavaScriptで外部CSSを追加しましたが、今回は直接CSSを書き込む方法。jQueryでも書いた直接CSSをJS内でCSSを書く方法です。

今回もあらかじめ書いておきますが、メンテナンス性が下がるので、おすすめする方法ではありません。サイトの構造とかメンテナンス性を考えるのであれば、前回の方法をおすすめします。

続きを読む

JavaScript OFF環境に優しく? その2

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
CSS
javascript

JavaScript OFF環境に優しく?その2

昨日は、jQueryでCSSを追加する方法を書いたのですが、本日はjQueryを使っていない環境でもJavaScriptでCSSを読み込む方法を書いておきます。

昨日のところにも書いたのですが、あくまでこのJavaScriptでCSSを追加する方法は、JavaScriptでDOMを操作するときに、DOMの読み込みが完了するまえに適用させておきたいCSSがある場合に利用しておくほうがいいかなというものです。これを利用することで、JavaScriptがOFFの環境でも、動的に動くことはなくなりますが、問題なくサイトを見ることができるようになります。

あくまでJavaScriptでDOMを操作する箇所へ適用するもので、それ以外は通常通り外部CSS化したCSSをlinkで指定するようにしましょう。

続きを読む

IE7・8で透過PNGにJSで透過させたら画像が汚くなった場合の対処方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
IE
opacity
透過

コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん?どういうことだ?なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・

おっと、なぜ!?

どのようなことなのか、確認しつつ対応方法を見つけようと思います。

続きを読む

Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
twitter
Bit.ly

Easy Retweet Button

Twitterをはじめたかなり前に比べると、ものすごくTwitterがにぎわっていると思うこのごろですが、いまさらながら「Retweet」のボタンを設置しようと思い、とりあえず簡単にですが設置してみた。

今回の設置では、「Easy Retweet Button」というJavaScriptを使って本当に楽に実装。

これを使うと、Retweetが簡単にできる且つ、その時に投稿したRTのリンクが何回クリックされたのかというのがわかるようになります。

ただ、使用する際にカスタマイズが必要でしたので、その点についてをメモしておきます。

続きを読む

SyntaxHighlighter2のカスタマイズ方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript

SyntaxHighlighter2のカスタマイズ

昨日「HTMLなどのソースを綺麗に表示するSyntaxHighlighterが2.0になってた」をエントリーしたのですが、今日はカスタマイズ方法を少し紹介しておきます。

続きを読む

HTMLなどのソースを綺麗に表示するSyntaxHighlighterが2.0になってた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
ソース
SyntaxHighlighter

SyntaxHighlighter

以前からソースコードを見せるときはこれを使っていたのですが、バージョンが2になっているのには気づかなかった。2にバージョンアップして、表示が良くなったので、すぐにここでも使えるようにして導入してみた。

続きを読む

フォーム(form)のテキストエリア内の改行を<br />に変換するJavaScript(jQuery利用)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
jquery

改行を<br />に変換

ちょっとしたテクニックなのかもしれないですが、
formのテキストエリアで改行つきの入力をしたときに、
改行を自動的にbrタグになる方法があったので、
メモとしてエントリーしておきます。

続きを読む »

JavaScript:文字を数値に変換する方法その2

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
文字
数値
parseInt
parseFloat

文字を数値に変換する方法その2

昨日のエントリーで「JavaScript:文字を数値に変換する方法」を書いたのですが、
そのコメントにてcyokodogさんが他の方法を教えてくれました。

そっちの方が記述少なく行けることが判明したので、
それも使ってみて動作を確かめようと思います。

続きを読む »

JavaScript:文字を数値に変換する方法(非参考版)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
eval
数値
文字

文字を数値に変換する方法

jQueryとかでCSSのpaddingとかを抜きだした時、
pxやemがついたまま抜きだされてくる。
これをreplace()などで数値だけにして足し算とかをしようとしても、
文字列として扱われてしまうことになる。

つまり、文字を数値へ変換しなければならないのだけど、
JavaScriptでどうやれば数値になるのか知らない。
調べたらたまに使っているeval()を使う事で、
文字を数値として使うことができるらしいので、
メモとしてエントリーしておく。

※文字列を数値とする場合はevelは利用しないように!!
本エントリーはJavaScriptを勉強する過程で書いた記事です。文字列を数値に変える場合、本エントリーのようなevelを利用するのではなく、次のエントリー「JavaScript:文字を数値に変換する方法その2」を参照し、parseInt()やparseFloat()を利用するようにしてください。
続きを読む »

JavaScript×Firebug:console.log()

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
Firefox
Firebug

JavaScript×Firebug:console.log

今回のお勉強はconsole.log()について。

JavaScriptを構築しているときに、
どのような結果が返ってくるのかというのを確認する時は、
HTML上に書き出させたり、alertで確認する方法を使ったりするけど、
この今回のconsole.log()は、Firefoxのプラグインの
Firebugのコンソール欄に結果を表示させるものらしい。

知らなかったのでメモエントリー

続きを読む »

JavaScriptの勉強:条件演算子「?」

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
比較演算子
条件演算子

条件演算子「?」

実はまだまだ知らない事が多いJavaScriptの基本、
ちゃんと勉強しないとなーなんて思うのですが、
ちょくちょく気づいた時にしかできなかったりします。

そんな今回「あれ?なんだっけな、これ?」
なんて思ったのが「?」の使いどころ。
調べてみたら、条件演算子ということ。
どういう使い方ができるのか、少し試してみた。

続きを読む »

Mootoolsでグラデーションのように変化するナビゲーション「Fancy Navigation」の設定の仕方

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
mootools
ナビゲーション

Mootoolsでグラデーションのように変化するナビゲーション「Fancy Navigation」の設定の仕方

Mootoolsを使ったナビゲーション、
Fancy Navigation with MooTools Javascript
というのがあったので試しに使ってみた。

ところがそこにのっているままの設定だと、
ちょっとだけチラついた動作があるだけで、
Demoでのっているような動きをみせてくれない。

なんでだ?

と思って試したら、書いてある設定が足りなかっただけみたいなので、
それもあわせて書いておきます。

続きを読む »

画像をランダムに切り替えるスクリプトを考える

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
jquery
javascript
乱数
random

画像をランダムに切り替えるスクリプトを考える

画像をランダムに切り替えるのって、
どうやるんだろう?ってことで調べてみた。

そして今回もいつものようにjQueryを使って作ってみます。

続きを読む »

文章中の文字をJavaScriptとして動作させてみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
jquery
eval

文章中の文字をJavaScriptとして動作させてみる

文章中に使ったサンプルの文字とかを
直接動作させる方法はないかなと思い探してみたら、
どうやらevalという関数で動作させることができるようだ。

今後作って動作させてみたいことがあるので、
今回はその時のために、evalの使い方を勉強してみる。

続きを読む »

onclick 属性をHTMLに書くかどうか

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
onclick
javascript
jquery

onclick 属性をHTMLに書くかどうか

いつも読んでいるブログのあちらこちらで、
JavaScriptのonclickについて書いてあったので、
自分の意見をふまえ簡単にまとめておく。

続きを読む »

スライドで見え隠れするエフェクトのついた二つのCSS縦メニュー

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
CSS
縦メニュー
jquery
mootools
verticalmenu01.jpg
Two CSS vertical menu with show/hide effects

上記のサイトにて、縦並びになっているメニューが
JavaScriptとMootoolsを使って紹介されていたのですが、
サンプルのプレビューの画像が切れて表示されていたり、
横幅を画像と同じにしたいと思ったので、ソースを少しいじってみました。

そして、僕はMootoolsとjQueryの二つの方法で、
Web2.0風の縦メニューのshow/hideエフェクトをつけたので、
比較してみようと思います。

続きを読む »

トップに戻る