2011年06月11日

Bloggerへ各種ソーシャルボタンを各記事ごとに設置する方法

最近は、様々なソーシャルサイトが数多く存在しており、
それらのサイトへ情報を共有することが出来ます。

メジャーなところだと、twitter、facobookなどですね。
※勿論、ソーシャルボタンを用意しています。

実際にBloggerに設置しようと思ってもうまくいかないことが多々あるので、
そのままコピー&ペーストして、設置が出来るようにソースを用意しました。

○twitter(※アカウント名だけは、自分のものを記述)
<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='twitterアカウント名' expr:data-text='data:title + ": "+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

○facebook
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=105&height=21&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:105px; height:21px;'/>

○はてなブックマーク
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' data-hatena-bookmark-title=' + data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>

○EVERNOTE
<script src='http://static.evernote.com/noteit.js' type='text/javascript'/><a expr:onclick='"Evernote.doClip({providerName:\"" + data:title + "\", title:\"" + data:post.title + "\", url:\"" + data:post.url + "\"}); return false;"' href='#'><img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/></a>

○Google +1
・</head>タグ前
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'ja'} </script>

・設置したいところ
<g:plusone expr:href='data:post.url' size='medium'/>

※twitter、facebookk、Google +1の場合、bloggerのブログ投稿設定で追加することも可能です。

まあ、これだけあれば、十分かな。

あと、試していないですが、Bloggerの場合、タイトルとURLのタグは、
以下のようになっています。

【記事URL】    data:post.url
【記事タイトル】 data:post.title

この部分を各ブログのタグに置き換えれば、なんとなく出来そうな予感がするな
posted by memo4me at 01:48 | Comment(1) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2011年05月10日

IISでのSSI利用方法について

開発時にApacheを利用するため、静的サイトを作成するときは、
IISを利用してサイトの作成を行っています。

今回、自分の関わっているサイトのページ数も多くなり、
共通部分を何百ページも変更してられないので、SSIを導入することにしました。

SSIを導入するとなると、サーバでSSI設定箇所に必要情報がインクルードされますが、
ローカルでもインクルードされないと表示上に問題あるかの確認ができません。
僕の環境はApacheではないためがないので、IISでSSIが使えるように設定する必要があります。

設定方法は、以下になります。
(※IIS7.0で設定です。)

(1)サーバー側インクルードを許可する
Windowsの機能の有効化または無効化よりインフォメーションインターネットサービスの
World Wide Webのアプリケーション開発機能よりサーバ側インクルードにチェックを入れて、OKを押します。

(2)shtmlでの読込が可能になったかを確認
コンピューターの管理から、インフォメーションインターネットサービス(IIS)マネージャーを開き、
ハンドラマッピングを選択して、以下の内容があるかを確認。
-----
SSINC-shtm
SSINC-shtml
SSINC-stm
-----

(3)htmlでSSIを可能にする
(2)で開いている画面より、「モジュールマップの追加」をクリック。
以下の内容を登録する。
-----
要求パス:     *.html
モジュール:    ServerSideIncludeModule
実行可能ファイル: 空欄でOKです
名前:       SSINC-html
-----

次に、「要求の制限」をクリック
「マップ」タブを選び、チェックボックスにチェックを入れ、ファイルを選択。
そして「動詞」タブを選び、「次の動詞のうちの1つ」をチェックし、テキストエリアには、「GET,POST」と記入。
最後に「アクセス」タブを選び、スクリプトを選んでOKを押します。

(4)htmlでSSIが可能になったかを確認
(2)で開いたハンドラマッピングを開きます。
(3)の内容を設定すると、一覧の中に「SSINC-html」が入っています。

これでSSIの利用ができる状態になります。
タグ:IIS SSI Windows
posted by memo4me at 03:06 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2011年03月25日

Tweet(つぶやき)の貼り付け方法

自分自身がtwitterをどのくらい利用しているか忘れましたが、
今まで利用したSNSサービスの中では、twitterが1番長い期間利用していると思います。
次は、facebookでしょうか。

さまざまなブログの記事内に、Tweetを貼り付けてる人がいますが、
初期の頃は、画像のものでした。

今まで自分自信が、ブログ内にtweetを記載することは無いだろうと
スルーしてましたが、ついに記載する時がきたので、
忘れないようにメモしておきます。

Blackbird Pie - Twitter Media

Twitterが公式に用意しているようで、掲載したいTweetのURLを上記ページ内のフォーム入力し、
「Bake it」ボタンを押すと、ソースコードが表示されます。
表示されたソースコードをブログの記事内に貼り付けると、Tweetが表示されます。

こんな感じ。



眠い。さすがに寝るless than a minute ago via Janetter


(なんかこのブログだとちゃんと表示されないみたいだけど、実際は、背景画像とか出ます。)


しかし自分で貼り付けるとは思わなかった。
やろうと思った自分にビックリ。
posted by memo4me at 00:13 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2011年01月13日

Facebookファンページの作り方

書こう書こうと思いつつ忘れていたので、簡単にFacebookファンページの作り方をメモ
※面倒なので、図解はなし。

○ファンページの作成
まず、ファンページを作成を開き、「公式ファンページ」をクリックしてページ作成する。
ページ自体は、これで完成。


○基本情報
基本情報の「名前」がURLに入るので、名前はアルファベットで入力する。
ただし25名のファンがつくと、ユーザーネームより管理しているファンページのユーザーネームを設定することが可能。


○専用コンテンツ
専用コンテンツを作るには、ファンページにデフォルトで入っているFBMLアプリを利用する。
難しいものではなく、通常のHTMLを記述すれば、問題なく内容が表示される。
ただし注意点として・・・
CSSは、styleタグを利用して記述するのではなく、各HTMLタグにstyle属性を使い記述する。
上記ルールで作成しない場合、firefoxやGoogle Chromeでは問題なく表示されるが、
IEではCSSが効かない為、正しい表示がされない


○その他コンテンツ
(1)twitter連携して、つぶやきをウォールに流す
Facebookのtwitterよりtwitterアカウントを登録する。
登録後に、App permissionsにて、作成したファンページにも表示されるようにチェックを入れる。

(2)公式ブログなどの更新情報をブログのRSS読み込んで、ウォールに流す
自分の場合、RSS Graffitiを利用。
RSS Graffitiを許可した後、設定画面よりファンページにRSSを登録して完了。
注意点として・・・
RSS Graffitiを登録するとデフォルトでタブメニューが追加されているので、アプリの「設定を編集」より削除。

その他、ディスカッションなど幾つかのタブメニューがデフォルトでついているが、
アプリを削除することが可能。

自分メモなので殴り書き
posted by memo4me at 11:00 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2011年01月12日

IIS利用時にJSONを読み込む方法

自分のPCでサイトを作成する際、作っている内容を確認する時に、
IISで利用し、ブラウザで表示させています。

今回、javascriptでJSONを読み込み、ブラウザで表示するといったものを作っていましたが、
javascriptファイルを読み込むが、JSONを読み込むことが出来ませんでした。

色々と調べていると、IISのMIMEタイプにJSONがないことが分かり、
表示するにはMIMEタイプの追加が必要とのことでした。

というわけで、IISのMIMEタイプ追加方法は、下記になります。
※Windows7を利用している場合
(1)「コンピューター」右クリック後に管理を選択して、コンピューターの管理を開く。
(2)「サービスとプリケーション」▼を展開して、インターネット インフォメーションサービス マネージャーを開く。
(3)「MIMEタイプの種類」を右クリックし、機能を開くを選択。
(4)画面右の「追加」よりMIMEタイプを追加。
ファイル名の拡張子:.json
MIMEの種類:application/x-javascript

これでIIS使っていても、JSONを読み込み可能になります。

マシンが変わった時のためにメモ
posted by memo4me at 23:48 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2010年11月01日

リモートデスクトップで、Windows 7 Home Premiumにアクセス

自宅から会社PCへ接続しようとしたところ、接続が出来ませんでした。
ホストになるマシン(Windows 7 Home Premium)で、リモートデスクトップの設定をしていないと思ったところ、ちゃんと設定してあった為、原因が分かりませんでした。

少し調べてみると、Vistaもそうだったのですが、リモートデスクトップをした時、
ホストになるマシンは、Professional以上出ないとダメということが分かりました。

OS的に無理と凹みつつ、他に方法がないかと調べてみたら、やっぱりありました!
http://thegreenbutton.com/forums/p/79427/393664.aspx#393664
上記URLは、掲示板(英語)になっており、スレッド内にダウンロードURLが記載されています。
いくつかのバージョンのPatchがあるようですが、
http://www.mediafire.com/?byec5ab1iriy9db が個人的に簡単でした。
圧縮ファイルをダウンロードし解凍すると、その中に「Concurrent RDP Patcher.exe」があります。
exeを起動すると、下記の画面が表示されます。



デフォルト設定は、オプションにチェックが入っていますが、個人の裁量で決めてください。
※僕はチェックを外しています。

その状態で、Patchボタンをクリックすれば、ホストマシンとして、リモートデスクトップが可能になります。

ちなみにPINGが通っているかを確認しましたが、Patchを当てる前と変わらず、
PINGは通っていません。
ですが、リモートデスクトップが繋がる状態になります。

探してみると、同様にVista(Home Premium)にも同じようなものがあるので、
ホストマシンとしてアクセスしたい場合は、試してみるのもいいかもしれません。
※自己責任でお願いします。
posted by memo4me at 23:45 | Comment(1) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2010年09月09日

Google Instantを試してみました

米Googleが、「Google Instant」を発表したので、早速試してみました。
まだ日本には導入されていない為、米Googleへアクセスにて実験。

文字を入力している最中から検索結果が表示される!
日本のGoogleでもそうですが、「g」と入力するとサジェストで一番上にくるのは、
「Google Map」になっており、「g」と入力するだけで、Google Mapについて検索され、結果が表示されます。

いろいろなワード試したけど、サジェストが表示される限り、サジェストの上位にあるワードで検索を行い、結果を表示するようですね。

じゃあ逆にサジェストがない場合はどうなるのか?と思い試してみると、
入力している文字にて、自動的に検索をしてくれるようです。
わざわざ検索ボタンを押さないで、結果を返してくれるので、わずかな時間短縮が出来るので効率的です。

動画を見つけたので、張っておきます。


ちょっと思ったのが、今後日本にも導入されたとしてユーザーの行動はどうなるんだろうか。
自分自身が使ってみた印象として、文字を入力して自動的に結果が出る為、目に入った結果が自分の望んでいるものでない場合、
第2ワード、第3ワードと入力してしまったので、今までよりも次ページへ行かなくなるように感じました。
そうなると今以上に、上位表示が必須になってくる気がします。
なので、上位表示が必須のサイトは、SEO対策をちゃんと行う必要が出てくるということになりますね。

便利になる分、頑張れということか。
posted by memo4me at 13:41 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2010年03月18日

Internet Explorer CollectionでJSが効かなくなった?

昨日、以前紹介したInternet Explorer Collectionが、作業中にJavascriptが効かなくなりました。
また通常使っているIEも挙動が変でした・・・。

原因はさっぱりですが、実際に使っているIEも一部挙動が変だった為、削除してみました。
IEは、削除後に入れなおしてたぶん正常?になりました。
Internet Explorer Collectionについては、相変わらず動作が変な為、IETesterに戻しました。

Internet Explorer Collectionの方が個人的には使えるので、修正版など出て欲しいところ。
posted by memo4me at 11:23 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2010年03月11日

Google短縮URLサービス「goo.gl」

随分昔に、Googleツールバーをインストールしてそのままだったので、全くもって気付かなかったのですが、最新のGoogleツールバーに新しい機能が追加されていました。

「検索窓」の右に「検索ボタン」がありますが、更にその右に「共有ボタン」があります。
ボタンをクリックするといくつかのサービスが表示されます。
例えば、twitterを選ぶと、自分の見ているページの「ページタイトル」と「googleの短縮URLサービスで短縮化されたURL」でつぶやくことが出来ます。

googleが短縮URLサービスを始めたのは知っていましたが、Googleツールバーにその機能が入っていたのは、見落としてた・・・。

posted by memo4me at 13:49 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2010年02月16日

Twitter短縮URL

http://d.hatena.ne.jp/Cherenkov/20090918/p1

これはいろんな意味で使えそう。
忘れないようにメモ
タグ:twitter 短縮URL
posted by memo4me at 21:41 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年12月18日

HTML5

少しづつでもそろそろ勉強した方がいいかなーって予感のHTML5。
W3Cが標準と定めたら、標準になっちゃうし、きっとクローラーもソースを同じように解析するのかな・・・。

とりあえず自分用参考サイト
http://www.html5.jp/
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

JSを使えば、レイアウトは組めそうな感じ。
タグ:HTML5
posted by memo4me at 14:03 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年10月19日

VistaからXPへリモート接続するとClearTypeフォントが汚い

Vistaマシンで作業を行なう必要があり、XPマシンへリモート接続したすると、
表示されるフォントが汚く、表示の確認もままならない状態でした。

調べてみたところ、XPだとClearTypeが有効にならないとのことで、
解決方法は、下記になります。

1)XPをSP3に更新して、RDPを最新のものにする
2)XPマシンに下記のレジストリを適応
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations]
"AllowFontAntiAlias"=dword:00000001
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\RDP-Tcp]
"AllowFontAntiAlias"=dword:00000001

これでVistaからのリモートデスクトップを行なっても、
ClearTypeフォントが正常に表示されるようになります。

無事解決!
posted by memo4me at 12:53 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年10月14日

リモートデスクトップで2画面使う方法

先日まで出先で作業をしていたのですが、贅沢にもデュアルディスプレイで作業し、
リモートで自分のマシンへアクセスしていました。

前々から気になっていたのが、せっかくなので2画面を自分のリモートに出来ないかを調べてみたところ、出来ることが分かりました。

やり方は、下記を参考。
1)リモートデスクトップのショートカットを作成
2)ショートカットを右クリックして、プロパティを開く。
3)リンク先の「%SystemRoot%\system32\mstsc.exe」を「%SystemRoot%\system32\mstsc.exe /span」にする。
 ※「 /span」を追加記述
4)プロパティを閉じる

これで作成したショートカットからリモートで接続すると、
接続元のデュアルディスプレイが、すべて自分のリモート先の環境になります。

問題点としてあげるなら、
1)モニタごとのスナップが効かない為、最大表示すると、2画面分になってしまう。
2)1画面分(例 1600*1200)を2画面(例 3200*1200)として開いているので、ダイアログなどが画面中央(モニタの境目)に表示される。

問題点もありますが、広く領域を使うことが出来るので、使いやすかった印象はあります。

気になる方は、お試しあれ。
posted by memo4me at 15:26 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年10月13日

Internet Explorer Collection

現在のInternet Explorerは、IE8がメインですが、確認環境と言った点を考慮すると、どうしてIE6から考えねばならない。
なかなか過去ブラウザ環境を用意出来るかと思ってもそうはいかず、今までIEtesterを利用していましたが、Internet Explorer Collectionなるものもあるようです。
IE1からIE8βまであるようで、調べてみたところ、既存のIEとはぶつからず使えるとのことで、インストールしてみました。

ちょっと使ってみようと思います。
posted by memo4me at 15:49 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年08月08日

EASEUS Partition Master

会社PCのHDDをCとDのドライブに分けていたのですが、Dの領域がなくなってしまい、作業データが保存できなくなってしまった為、1TBのHDDを追加してもらいました。

そこでもうCとDも分かれている必要ないし、1つにしたいなーと思い、調べてたら「EASEUS Partition Master」なソフトがありました。

このソフトで、ドライブの削除や追加、サイズ変更などが出来るので、OSの入れ直しもする必要がありませんでした。

すごい簡単で、その上分かりやすかったのでよかった。
posted by memo4me at 17:23 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年07月15日

Sugarsync

Dropboxと同じようなオンラインストレージです。
http://d.hatena.ne.jp/frnk/20090626/1245987497を見る限りDropboxを超えてる印象があったので、
アカウント取得してみました。

今日までキャンペーンをやっているらしく、下記のURLからアカウント作成すると、
通常2GBが無料ストレージのようですが、500MBがおまけされて、2.5GBになるそうです。
有料30GBプランを選べば、10GBのおまけが付くみたいです。

https://www.sugarsync.com/referral?rf=fc6ibit8je8zk

Dropboxと併用すれば、4.5GBかー
posted by memo4me at 09:39 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年07月10日

name属性について

XHTML1.1になった時に、使えなくなるタグがあります。
その中の1つとして、ページ内リンクで使われるname属性があります。

name属性が廃止になった時には、id属性を使いページ内リンクをするようになりますが、
特定バージョンのIEなどで認識をしてくれなかったのですが、
ここ最近使われるブラウザ(IE6〜IE8,firefox3,Safari)では、id属性のみ指定で動作します。

注意しないといけないのは、id属性がCSSなどと被ると動きません。

個人的には、今まで記載していた<a name="test"></a>と書いていた1行を<h1 id="test">などと記載できるので、1行減るのがうれしい。
タグ:HTML XHTML CSS Name ID
posted by memo4me at 09:07 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年05月21日

iPhoneおよびiPod Touch用apple-touch-icon.png

iPhoneやiPod Touchのデスクトップに表示されるアイコンを作成する機会があったので調べてみました。
「apple-touch-icon.png」というもので、簡単に作成が可能です。

1. 57x57pxの画像を用意
2. 表示したいHTMLのheadタグ内に下記を記載
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

3. サーバのルートにUP

正方形で作成しても表示側で角丸になるので、自分で角丸にする必要はない。
まあfaviconと変わらないな。
posted by memo4me at 19:43 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2008年10月29日

Google Trends日本語版オープン

Google Trendsが日本語版をオープンしたようです。
http://www.google.co.jp/trends

昔英語版が出た時に、少し触ったけどもう覚えてないな。
時間作って少し触ってみよう。

検索キーワードは、やっぱりOvertureのが1番良かったんだけど、
サービス再開してくれないかなー
posted by memo4me at 02:50 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2008年10月20日

Google Analyticsでクリック数をカウントする方法

Google Analyticsは、いまや誰もが利用しているツールです。
クライアントからの依頼で、クリック数を取りたいとの事で、調べていたらGoogle Analyticsでクリック数を取得する事が可能でした。

カウントを取得するには、カウントしたいaタグに、javascriptを実装する必要があります。
またGoogle Analyticsは、古いトラッキングコード(urchin.js)と新しいトラッキングコード(ga.js)の2種類が存在します。
それぞれjavascriptの記述が変わるので、注意しないといけない。

【urchin.jsを利用している場合の記述】
onclick="javascript:urchinTracker('/aaa');"

【ga.jsを利用している場合の記述】
onclick="javascript:pageTracker._trackPageview('/bbb');"

上記の記述をしておくと、Google Analyticsの左メニューにあるコンテンツ内の「上位コンテンツ」にクリックされると設定した「/aaa」などが反映される。

う〜ん便利。
posted by memo4me at 22:50 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。