WEB

Google ChromeのFacebookツール

Facebookのイイネボタンはほんとに気軽に行えて良いですね。
なんとなく「イイ」って思ったらポチっとするだけ。
他の人にもこの良さが分かるといいなーと小さな願いを込めたり込めなかったり。 

ソーシャルボタンを実装しているページは増えて来ましたが、
まだまだ無いサイトもたくさんあります。
それでも、イイと思ったサイトは何とか共有したいなと思うのですが、いちいちfacebookのサイトを開いて~なんてめんどくさい!

最近メインにgoogle chromeを使っているので、エクステンションがあるだろうと探してみると。。。
そりゃもう予想以上にビッシリと。

 

 

めぼしいものを見繕ってみる。

 

Facebook for Chrome (一番左)
インストールはこちら(それぞれ、ブラウザはクロームで開いて下さい)

Facebook Share Button(真ん中)
インストールはこちら

Facebook Like Button(一番右)
インストールはこちら

  • このエントリーをはてなブックマークに追加
0

PHPで読み込んだ箇所のタグ属性を消す

新着情報を表示させたい。

読み込んだ内容がタグごとまんま表示されて、レイアウトが!!

となり、だいぶアセアセしました。 PHP初心者には初歩的なことも分からないのです。

リファレンスとかいくつかピックアップしてるのですが、 関数がうんちゃら、返す値が~とか書いてあるにはあるのですが、 初心者にはやはり事例がないと、参考にするのは難しいですね。。。

いつもPHP SPOTさんを参考にさせていただいてるのですが、今回の内容はこちら。

PHPで、最初に読み込む内容を定義し、あとにHTMLで表示。

PHP SPOTさんの例文は以下ですが

$text = “text“; $text = strip_tags($text); echo $text; // text が出力されます。

◆1行目 $text = “text“; $textを定義しますよ。 $textとしたものは textとして表示されますよ。

◆2行目 $text = strip_tags($text); $textを定義しますよ。 strip_tag(装飾タグを全部剥ぎ取り)は $textに適応しますよ。

◆3行目 echo $text; // text が出力されます。

echo はページに表示するタグですよ。 echoされた $textは次のように表示しますよ。

表示例: text

2行目がなかったらtextとなるはずですが、 strip_tagsしているのでtextという文章に強調はつきません。

こんな感じで分かりやすいだろうか……。

  • このエントリーをはてなブックマークに追加
0

Flash代替画像をjavascriptで表示させる方法と、非iOS環境での確認方法

SyntaxHighlighter が適応されないので追加修正しました。
ついでに補足も足しています。
新しい記事はこちら

「自社サイトさぁ、iPadでフラッシュみれないじゃん!」
って言われて、帰り際に作業をすることになりました。

そこで必要になったのでやり方をメモっておきます

元々のタグ

<script type=”text/javascript”>
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0′,’width’,’745′,’height’,’374′,’src’,’main’,’quality’,’high’,’pluginspage’,’http://www.macromedia.com/go/getflashplayer’,’movie’,’main’ ); //end AC code
</script>
<noscript>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”745″ height=”374″>
<param name=”movie” value=”main.swf” />
<param name=”quality” value=”high” />
<embed src=”main.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”745″ height=”374″></embed>
</object>
</noscript>

これではiPhoneやiPadでは見れないため、コードの書き換えが必要。画像も。

そこで<parm>下にimgタグをいれるだけ、みたいな手法を発見したので試してみる。

  example

<object>
<param ……/>
<param ……/>
<param ……/>
<img src=”画像パス”>
</object>

残念。
FLASHは見れるものの、ipad(3と呼ばれないアレ)で確認したところ、だめでした。
画像表示されない。

次に、javascriptでの表示に変更。

  記述例 example

<head>
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/swfobject.js” charset=”utf-8″></script>
</head>

<body>
<!– Flash Area [ –>
<div id=”flashArea”>
<h2><a href=”campaign.php” target=”_blank”><img src=”img/images.jpg” alt=”Adobe Flash Playerインストール” width=”740″ height=”535″ /></a></h2>
<script type=”text/javascript”>
var so = new SWFObject(“main.swf”, “flash”, “100%”, “535”, “8”, “#fff”);
so.write(“flashArea”);
</script>
</div>
<!– ] Flash Area –>
</body>

代替画像の設置方法 参照
やったやった!代替画像表示さーれた!

私みたいにjsよくわかってないデザイナーさんのために、<script>の解説

var so = new SWFObject(“main.swf”(swfファイルの相対パス), “flash”(任意のタグ), “100%”(横幅), “535”(縦幅), “8”(flashのバージョン), “#fff”(カラー));

最初あるぇー、表示されぬぇー?って思ったらswfobject.jsを読み込んでなかったという初歩的みす!

ちなみにタグ中の「Flashのバージョン」については、
上記のようにバージョンを 8 とした場合、
「バージョン8以上のプレイヤーが入っている場合のみ再生させることが可能」という意味です。
バージョン7以下のプレイヤーで閲覧した場合は再生されません。

iPhoneもiPadも持ってない私は、どうにかしてFLASH環境を再現できる表示確認方法ないかと…。

ありました。

表示確認ツール何かないか探って、Firefoxのアドオンでフラッシュのon/off切り替えできるものをいくつか発見しました。
私的にはこちらで紹介されているPrefBarがよかった。

非表示時に代替画像も確認。(もちろんiPadでも確認してもらいましたよ?)

  • このエントリーをはてなブックマークに追加
1

wordpressユーザーの追加。そして…

既存のwordpress仕様のホームページはいくつか触ってきていますが、 1から自分で作るってことはありませんでした。

そこで困ったことがいくつか発生…。

・ファビコンがうまく登録できない ・独自テーマの作り方がいまいちわからない ・適当にプラグイン突っ込んでるけど大丈夫なのか ・アドレスきちんとしないと… ・パーマリンクがデフォのまま ・毎日更新するネタに困っている(これはちがうかw)

仕事上、ユーザーの追加をしなければいけなかったのでそのことをメモメモ。 続きを読む

  • このエントリーをはてなブックマークに追加
0

IEテスターなんていらない!

今までブラウザチェックのツールを色々探したりしておりました。
だってテスターってjavascriptうごかないんだもん。

このjQuery全盛期の時代に。
スクリーンショットを回数限定で見れるものとかあったけど使いづらくてしょうがない。重いし。
しょうがないからテスターで確認して、ズレとか挙動とかおかしいところなおしてたけど。
どうもIEテスターのバグを治すためのコードを書いてたりする気がしてならなかった。

なんかないのーとおもって探してみると。
「IE8にはIE7のプレビューする機能がついてます」

ってえぇえ!
じゃあIE9もあるんじゃっておもって
F12の開発者ツール
→ブラウザモードでIE7・8
変更することで

おおっ
スタイル変わった!

IEで標準でデバックツールついてたんですね…。

しらなかった。

  • このエントリーをはてなブックマークに追加
0

パンくずリストについて

パンくずリストについてちょっと違和感というか思ったことを書いてみようと思う。
例えば上のグローバルメニューがあるページ。
そして右か左にメニューがついているページ。

どうだろう。
それ+パンくずリスト。

右側のメニューがカテゴリ移動する毎に変更するのならば現在どの階層にいるかがよくわかる。

逆に右が変動することでメリットはあるのだろうか。
表示される項目が少なくなるのはメリットその1
 これはページ数の多いサイトなんかでは有効かもしれない。

いやでも、右側のメニューが変動するのにパンくずリストは必要なのだろうか。。。
私の考え方はとにかく「削る」ことが好きだ。
ごちゃごちゃと空白を埋めたりマージン整えたり装飾たくさんつけたり。。。
今スタンダードとなってるデザインは、ほんとはあまりやりたくない。
空白をうまく利用して。
無理に埋めるとかいう考え方は、欧米のもの。
ゼロにデコレーションを重ねてデザインとなる。 ヨーロッパの尖角な教会とかそんなかんじ。
「和」のデザインはよりゼロに近づけるもの。
シンプルに、それが一番日本人にあってるとおもう。

話はソレたが、
メニューが上、右、中上段、
はたまた下部にまでサイトマップがあるじゃないか。

SEO的にうんぬんかんぬんってのもあるけど。
ほんとにそんなに「メニュー」がたくさん必要なの?っておもってしまう。

もっとシンプルに提案できるデザインと理論を考えたい。

  • このエントリーをはてなブックマークに追加
0

androidやiPhoneでPDFが見れない?

PDFファイルがアンドロイド、iPhoneで見れない!という現象が。

泣きそうになりながら不具合調整。
あれもちがう、これもちがう。
そういう解決法もWEBで見当たらないし。
なんで~~~?

普通のサイトのやつはみれたり、
PDFリーダーいくつか入れてみたり、
ユーザーエージェント替えて見てみたり、(PCだとOKなのに)
ブラウザ替えてみてみたり。
あげくPDFを別のドメインに移して DLはこちらページを作って出来るかどうか………

デキタヨ。

うえーんなんでじゃー!って思ってたら、
どうやら「htaccessでパスをかけていると、PDFがみれなかったり動画が表示されなかったりする」らしい。
まーじーでー。

そしたら上司に小言が…うぅ、がんばたのに。
最近もう遅くまでやって寝不足でたまらん。。。

もしかしたらサイトにパスかけての不具合、というのもあるかもしれませんね。

  • このエントリーをはてなブックマークに追加
0

クロームやiphoneでラジオボタンが消える

Webkit特有のものでしょうか。
【フォームタグ】


これだけでラジオボタンができる
しかし

とすると、クロームやiPhoneで表示されない

ところが

とすると表示可能

あまり知られてないけど。

  • このエントリーをはてなブックマークに追加
0