カテゴリー「ウェブログ・ココログ関連」の93件の記事

2015年7月 2日 (木曜日)

レスポンシブにしたらYouTube動画が欠けてしまう

 ココログのテンプレートをレスポンシブにする話の続き。前回の話は「ココログのテンプレートをレスポンシブにしてみたい」にある。解像度の低い端末で見ると、メインカラムの幅が狭くなって貼り付けたYouTubeの一部が欠けてしまう。さてどうしよう。

 というわけでJavaSciptでなんとかすることにする。参考にしたのはこれ。

 Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 - HAM MEDIA MEMO はてなブックマーク - Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 - HAM MEDIA MEMO

 試す。おお! うまくいく! すばらしい。

続きを読む "レスポンシブにしたらYouTube動画が欠けてしまう"

| | コメント (0) | トラックバック (0)

2015年6月27日 (土曜日)

ココログのテンプレートをレスポンシブにしてみたい

 おもにモバイルフレンドリーとかいうやつを考慮して。スマートフォンで見た時に強制的に別のページにリダイレクトされたりするのは回避できないのかと思ってたのだけど、できるらしいというのを知って。いまさら。

 参考にしているのはこれ。

 Google にスマホ対応と認められたので、ココログ用のレスポンシブデザインのスタイルシートを公開します: ある SE のつぶやき

 ココログの上級テンプレートで勝手にスマホ対応で表示されてしまう問題の対処方法: ある SE のつぶやき

 元になるテンプレートが違うけど、なんとかなりそうと作業。左右にあったサイドバーを右に移動(メインや個別記事、カテゴリなどそれぞれのテンプレートで#leftと#centerの順番を入れ替え)。さらに#leftと#rightをまとめてdivで囲んでみたり(#sidewrapとした)。でもって、画面幅が狭ければそれをcenterの下に行くように。

 リダイレクトは「<$MTWeblogTypeCastMobileLink$>」の削除でよい模様。どうやって調べたのだろう。すごい。

 「スマートフォン表示で見る」みたいなボタンはJavaScriptで出ているだけど、それはほかのスクリプトともに読み込まれる。個別にOFFにはできない模様。とりあえず、そのdivそのものを表示させないようにしてみた。

 viewportはどうするべきか。いまひとつうまい方法がわからない。とりあえず、目的の半分以上は進んだと思われ。

 でもって、Googleのチェックページで見ると、ココログのモバイル用ページに移動している気配。むー。元の状態がクッキーで残っているみたいな感じ。まあ、違うだろうけど。

 モバイル フレンドリー テスト

 もう少しいろいろ調べないと。

(追記)

続きを読む "ココログのテンプレートをレスポンシブにしてみたい"

| | コメント (0) | トラックバック (0)

2014年10月20日 (月曜日)

ココログでエラー。原因はテンプレートの編集ミス

 投稿時、既存の記事を編集すると、最後にエラーが出る。

 トップページに反映されない。仕方ないので、indexページを再構築してみる。ページは出るのだけど、最近の記事にはリストアップされない。RSSにも出てこない。

 何が問題なんだろう。困った。

 「反映中」と出たあと、こういうメッセージが出る。

問題が発生しました。
エラーが発生しました。ココログ管理画面トップへ戻ってください。
※画像をアップロード時にこのページが出る方は、画像の容量をご確認ください。
ココログでは1アップロードあたり1MBを超える容量のファイルをアップロードすることはできません。

 参った。めんどくさい。

続きを読む "ココログでエラー。原因はテンプレートの編集ミス"

| | コメント (0) | トラックバック (0)

2014年6月21日 (土曜日)

「あわせて読みたい」とかをいまさら外す

 そういえば、こんなのを付けてたなあ。と、いまさら気づく。たぶん、もう使ってる人も少ないだろうし、集客効果もないだろうということで。

続きを読む "「あわせて読みたい」とかをいまさら外す"

| | コメント (0) | トラックバック (0)

2013年9月19日 (木曜日)

サイドバー用スクリプトでリンクシェアからPHG用に置換 iTunesアフィリエイトリンク

LinkShare to PHG

 iTunesアフィリエイトがリンクシェアからPHGに移行するタイミングが迫ってきております。みなさん、対応はお済みでしょうか?

 WordPress用とかMovableType用のプラグインとかテンプレートでやる方法とかいろいろあるわけですが、そうでない場合はどうすればいいんだ? と迷っている方もまだいるかもしれません。というわけで対応策としてスクリプトを作ってみました。

 ここで利用するのはJavaScript。HTMLを表示するタイミングで置換してしまおうというものです。さまざまなアプローチがあるなかで一番手間がないのがこれです(という話は前にここでしました)。

 headタグの中にスクリプトを仕込む方法もありますが、

  • 利用しているサービスがテンプレートの改変不可
  • テンプレートの書き換え方がむずかしくてわからない
 といった場合にはお手上げとなってしまいます。

 もっとカンタンな方法はないか?

 ということで考えたのが今回紹介する方法=「サイドバーにJavaScriptを仕込む」になります。

 これならテンプレートの書き換えができないココログBasicとかFreeといったコースの方でもいけると思います。FC2ブログとかlivedoorブログでも大丈夫。もちろん、WordPressでもOKです。JavaScriptが貼り付けられるならなんでもいけるはず。WordPressユーザーで、「プラグインなんてわかんないよ!」という方にも。

サイドバーに置くだけですべてのリンクを置換

 ブログサービスによって、「サイドバー」に表示するコンテンツとして「プラグイン」(FC2ブログ、livedoorブログなど)とか「ウィジェット」(WordPress)とかいろいろ言い方はあるわけですが、今回使うのはその、記事コンテンツ以外の、ブログの両サイドに表示される部分にさまざまなものを表示できるあれです(おおざっぱ)。

 当ブログが利用しているココログでは、「マイリスト」を編集することで、サイドバーに表示するコンテンツをいろいろできたりします。

 そこにJavaScriptのコードを書き込むことで、置換が行われます。注意が必要なのは、JavaScriptのコードが、置換すべき対象より後にこなければいけないということ。ということで、右サイドバーの一番下などに配置するのがベストだと思います(うまいこと説明できない)。

 では、いよいよ肝心のコード。

続きを読む "サイドバー用スクリプトでリンクシェアからPHG用に置換 iTunesアフィリエイトリンク"

| | コメント (0) | トラックバック (0)

2013年9月 3日 (火曜日)

iTunesアフィリエイト PHGへのURL置換を力技でやったよ! リンクシェア用160件分をPHG用に変換

LinkShare to PHG

 iTunesアフィリエイトの提携先が10月からリンクシェアからPHGに変わります。リンク作成ツールの多くはすでにPHG対応を果たしているようですが、過去記事の既存のリンクをどうしようと悩んでいる人も多いと思います。当ブログではいろいろ考えた末、個々の記事について1つ1つ手動で置換するという力技で対処しました。その数約160件!という話。

 力技と言っても、スクリプトを使って多少は楽をしつつという感じです。ここではその方法を、そこに至るまでの過程を交えメモ。長いです。過程はいらないという方は下の方の画像がある段落あたりへどうぞ。

 ちなみに今回の方法は、ここで何度も出てくるリンク作成ツール「Sticky iTunes Link Maker」によって生成したHTMLコードに対して有効でした。また、AppleのiTunes Link Makerによるコードでも動作しました。作成したタイミングにもよるかもしれませんが、多くの場合は大丈夫じゃないかと思ってます。なお、これからリンクを作るぶんには、すでにPHG対応がされているので、こちらもどうぞ。

 では、スタート。

URL置換へのアプローチ

 URL置換の方法として考えられるのはおおむね以下の4つ。

  1. データベースでの処理
  2. テンプレート、プラグインによる処理
  3. JavaScriptで表示時に置換
  4. 記事を1つ1つ処理

 まず、1つめ。MovbleTypeやWordPressなど、サーバーにインストールするプログラムで使える方法。データベースをいじるのは知識が必要、間違えると取り返しがつかないということで、敬遠する人が多い模様。

 2つめのテンプレート、プラグインもMovbleTypeやWordPressなどでとられる方法。データベースの内容はそのままでOKということで主流になっているようです。たとえばこのへん。

 データベースに手を付けないというのは安心感が違います。

 3つめは、ブラウザで閲覧するタイミングでURLを置換するというもの。たとえばこれ。

 テンプレートをいじれないココログの無料コースでも、多少スクリプトを修正すればリストを使って動かすことが可能でした。JavaScriptをOFFにしている人はほとんどいないと思うので、問題はないと思います。とても手軽でいい感じです。

 で、最後の4つめ。1、2の方法のような一括処理ができないという環境向け。元記事を1度修正してしまえば、その後はサーバー側・ローカル側での処理はいっさい不要。という点で、精神衛生上いい、なんて人がいるかどうかはわかりませんが。記事件数が多いと激しく面倒です。

 それでもやってみたい! ということで作業をすることにしてみました。まずは、リンクシェア向けのURLにある「itunes.apple.com%252Fjp%252F」なんかで記事を検索(「click.linksynergy.com」だとiTunesアフィリエイト以外のリンクシェア提携企業のものも含まれるため)。件数は冒頭で触れたとおり160件でした。

 スクリプト作成に時間がかかりましたが、それ以降の実際の作業はテレビを見ながらだらだらとやって約2時間。これなら、やってみようっていう人も多少はいるかも(いるといいなあ)。

 ということで、以下からが本題。

続きを読む "iTunesアフィリエイト PHGへのURL置換を力技でやったよ! リンクシェア用160件分をPHG用に変換"

| | コメント (0) | トラックバック (0)

2012年10月12日 (金曜日)

Feedを表示させる方法をいろいろ考える PipesかGoogle Ajax Feed APIか?

 WebサイトにFeedを表示させる方法を考えている。Yahoo! PipesかGoogle Ajax Feed APIか? どっちもサーバーサイドの処理を利用せずに、手軽に試せる。これは便利。

 しかし、これらを使って、誰でももっとカンタンに、すなわち、JavaScriptのコードを書かなくてもいろいろできるようにしようとすると、ちょっと考えこんでしまった。そんな話。

 やりたいことの基本は、Feedを使ってブログパーツ的なものを作りたいというもの。

 PipesはJSONPも使えるので、プログラミングする側にはすごく便利。しかし、利用制限が気になる。

 yahoo pipesの利用制限を教えてください。 ・一日のクエリ数 ・.. - 人力検索はてなはてなブックマーク - yahoo pipesの利用制限を教えてください。 ・一日のクエリ数 ・.. - 人力検索はてな

 多くの人に使ってもらおうと思ったら、制限くらって自分のほかのPipesにも影響が出たりすることは避けたい(これが起きうることなのかちょっとわかんないけど)。かといって、Pipesを個々の利用者にクローンしてもらうのもかなりハードルが高い。アメリカのYahoo!のアカウントが必要だし、英語だし、みたいな部分もあって。

 では、Google Ajax Feed APIはどうか? こっちもプログラミングはわりとカンタン。キーの取得も不要になったということなので、利用制限も気にしなくていいっぽい(ちゃんと調べてないけど)。

 しかし、これっていったんFeed全体を拾ってくるということには変わりがないわけだよね? その容量が問題。

Web開発者のためのRSS & Atomフィード というのも、現在使用を考えているやつは、元となるFeedの容量がびっくりするくらい大きいからだ。最新の10件をダウンロードしてみたら128KBもあったりするのだった。もっと小さくしてからロードさせたい。となると、JavaScriptではどうにもならない気がしてきたのだった。不要な要素は整形してもっとスリムにしてから、なんてことはできないわけで(たぶん)。

 となると、サーバーサイドの処理をかますことが考えられるのだけれども。

 Pipesならキャッシュだけすればいい、Google Ajax Feed APIなら整形までしてキャッシュ? いや、そこまでやるならPipesのほうでいいか、とか。

 そういえば、海外ではPipesを経由して、Feedをキレイに表示させるブログパーツみたいなやつもあったっけ。表示のデザインがカンタンにできるっていうやつ。その程度でも使いたいという人は多そうではあるけれど。あれがOKなら、利用制限はそんな気にするほどでもないのかなあ。とか思いつつも。

 結局は両方を使う、とかいう方向になったりして。それですんげー重かったりとか。いろいろ勘違いしてそうだけど、とりあえず、そんな感じで。

 ちなみに、どっちの場合でも表示する側のJavaScriptのコードの容量はほぼ気にしなくていいレベル。ちょっとでも小さくしたいのなら、圧縮ツールがある。去年くらいから使っているのが、「MicrosoftのAjax Minifier」というもの。

 Ajaxに力を入れ始めたマイクロソフト、今度はJavaScript圧縮ツールを無料公開 - Publickeyはてなブックマーク - Ajaxに力を入れ始めたマイクロソフト、今度はJavaScript圧縮ツールを無料公開 - Publickey

 バッチファイルを作って一発で変換できるようにしたら、作業が楽になった。
 でも、ファイルに日本語があると失敗するということに最近気づいた。文字コードの問題か? と思ったらやっぱりそうだった模様。
 ヘルプのコマンドラインオプション見てもわからなかったことが、以下のエントリで知ることができた。

JJWorkshop [BLOG]: iPhoneアプリ「Routeman」ソース一式はてなブックマーク - JJWorkshop [BLOG]: iPhoneアプリ「Routeman」ソース一式

 エンコードのオプションは「/Eo:UTF-8 /Ei:UTF-8」っていう感じでいいそうだ。これを見てからヘルプを見なおしたら、もう少し理解が深まった。

 ということで、これについては解決。

| | コメント (0) | トラックバック (0)

2012年8月20日 (月曜日)

はてブ○○usersをNAVERまとめに-ブックマークレット

 キュレーションサービス(?)として人気の「NAVERまとめ」。「まとめ」というだけあって、既存のページへのリンクを中心に構成されるまとめが多いのも事実。でも、そのリンク先記事の評判はどうなの? と思うことも。

 ということで、NAVERまとめの記事ページ内のリンクに、はてなブックマーク(はてブ)の「○○users」を表示するブックマークレットを作ってみました(導入方法は後述)。

  • リンクの中から人気がある記事だけ見たい
  • どれだけの人が支持してるか知りたい
  • はてなブックマークのコメントがすぐ見たい

 なんて方にオススメです。

どうやって使うの?

 NAVERまとめのページを見ます。以下の画面の例は、これ

Navermatome2hatena01

 で、リンクがいくつかあるなあ、これのはてなブックマークの登録数が知りたいなあ、と思ったとしましょう。

 そこで、登録しておいたブックマークレットをクリック。

Navermatome2hatena02

 すると、リンクの横に、おなじみの赤い文字で「○○users」っていうリンクが出現します。

 あとは、その数を見て人気度を推し量ったり、そのリンクをクリックしてコメントを見たりしてください。

 そんだけです。

ブックマークレットの導入

 以下のタイトル部分(一番上の「bookmarklet」の右側)を、ドラッグ&ドロップでお気に入りバーとかブックマークバーへ。あるいは右クリックでお気に入り、ブックマークへ追加。Safariではブックマーク名を入力するダイアログが出るので適当に指定してください。

 あとは、通常のブックマークレットと同様に。

 あっ、NAVERまとめの個別記事のページのみで動作します。たぶん。

 また、はてなブックマークに登録がないページへのリンクには、「○○users」が付加されません(画像がないので)。

 それから、サイドバーとかフッターはリンクにカウントしてません。それらが必要!とかいう方はご自身でフォークしてください(あるいは要望があればなんかしたりするかも)。

続きを読む "はてブ○○usersをNAVERまとめに-ブックマークレット"

| | コメント (0) | トラックバック (0)

2012年7月 6日 (金曜日)

twitterアイコン付加スクリプトで「&」で切れる問題修正-ココログ無料版用

 URLに「&」があると文字が途中で切れるという問題。「ココログ無料版に「はてブ」やtwitter、Yahoo!ブックマークのアイコンをつける」で紹介したスクリプトの修正方法です。

Add_icon

 上記エントリのスクリプトで、タイトルに「&」が含まれていると、そこでtwitterに渡す文字が途切れるという問題が発生していました。それに気づいたのは、「iTunes & App Storeリンク作成をブックマークレットでカンタンに Sticky iTunes Link Maker用」というエントリからtwitterアイコンをクリックした際のこと。クリックで開いたtwitterの入力欄に「iTunes 」としか出て来なかったから。

 その理由は「&」がパラメーターの区切りとして認識されてたからだと思われ。

 ということで、修正。twitterに渡すパラメーターの「twTitle」の部分を「twTitle.replace('&','%26')」に。Yahoo!ブックマークも同様に。

 まあ、私以外にこれを使ってる方はほぼいないとは思いますが、一応。

| | コメント (0) | トラックバック (0)

2012年6月27日 (水曜日)

手のひらサイズのかわいいワイヤレススピーカー「ロジクール ミニブームボックス」は音もよかったよ!

 ちっちゃくてかわいくて、ワイヤレス接続できるスピーカーってのが気になってまして。それが、Bluetoothワイヤレス スピーカー「ロジクール ミニブームボックス」。iOS用音楽アプリを使う人にもいいですよ!って感じ(理由は後述)。

 幸運なことにロジクールさんのモニターに当選しまして、それが先週送られてきたわけです。1週間ほど使ってみたので、かるくインプレッションなど。

Cimg0823 まず、本体がおどろくほど小さい。まさに手のひらサイズ。

 ボディはプラスチッキーな感じ。つるつるしてて意外と安っぽさは感じません。さらにちょっとした重みを感じるのは、本体の小ささからくる印象からの反動でしょうか(重さは230gだそうです)。とにかくコロンとしててかわいいんですよ。

 でもって、これがケーブル接続なしで使えるわけです。Bluetooth対応なんで当たり前なんですが、電源ケーブルも不要ってところがポイント。充電池内蔵で、最大10時間ももつんです。スマートフォンといっしょに家中持ち歩けるのはもちろん、外出先でも気軽に持っていけそうです。

 でもって、Bluetoothでの利用にはペアリングという作業が不可欠。ミニブームボックスは、初回電源投入時にペアリングするモードで起動するので、あとはホスト側(今回はiPad 2)で検出すれば即使えるようになります。気が利いてますね。

Cimg0819 でもって、あとは音楽を再生するだけ。うれしいことにある程度充電もされてたみたいで、すぐに聞くことができました。

 で、小さいくせにしっかりした音が出ます。というか、これまで使ってきた小型のスピーカーの音のまずさはなんだったのか!っていうくらい、ちゃんとしてます。

 まず、ベースの音がしっかり聞き取れます。各楽器の輪郭も見えます。小さいスピーカーでありがちな、こもった感じもありません。アコースティックチャンバーってのがいいんでしょうか。

 音量は部屋で聞くには十分なパワー。さらにボリュームをあげてくと、隣近所が気になるくらいまではいけます。

Cimg0826 ボリューム調整は本体天面のパネルから。ぱっと見真っ黒なんですが、ここがタッチパネルになっていて、触わるとバックライトに照らされてボタン(といっても平面なんですが)が浮き上がってきます。静電式だそうです。+/-ボタンのほか、再生&一時停止、スキップも用意。そう、再生コントロールもあるんですよ。スマートフォンなどのホストデバイスを離れたところに置いてあっても、ミニブームボックスがリモコン代わりになるというわけです。

 ちなみに写真でスピーカーの下においたのは、サムスンのスマートフォンGalaxy S。ほぼフットプリントがいっしょってのがわかると思います。

 充電は付属USBケーブル経由でPCから行うことが可能。ACアダプタも付属します(ケーブルはUSBケーブル共用)。ACアダプタも小型なので、いっっしょに持っていくのもなんとかなりそう。まあ、10時間もつので、不要なことは多いとは思うのですが、長期の旅行なんかだとうれしいかも。

Cimg0821 背面には、電源スイッチと、充電用のミニUSBコネクタ、さらにAUXがステレオミニで用意されます。

 これが重要!

 Bluetoothは音楽を聴く分にはいいんですが、iPad 2で楽器アプリの演奏なんかをする場合には遅延が大きくとても利用できたものではありません。

 しかし、ミニブームボックスなら(物理的な)アナログ入力もあるので、これを使えばいいというわけです。オーディオケーブルが必要になりますが、電源ケーブルは不要のまま。最小限で済みます! 遅延なしでしっかり楽器アプリが堪能できます。

 iPad 2では楽器アプリのほか、アンプシミュレーター搭載アプリとLine 6 Mobile Inを使ってギターを弾いたりします。
 この際にこれまではiPad 2内蔵のスピーカーで聞いたり(モノラル!)、ヘッドフォンを使ったり(コードが邪魔!)してたんですが、ミニブームボックスを使ったらこれがまた便利。

 しかも、iPad 2とミニブームボックスをリビングのテーブルに置いてもじゃまにならないってのがいいんですよ。このセットなら家中どこでもいっしょに気軽に持ち運べるので、寝室でも楽しんだりするようになりました(もちろん、ここではギターは持って行きません。iPad 2のみです)。

 小さいのにデキるやつ。それがミニブームボックスの第一印象です。

続きを読む "手のひらサイズのかわいいワイヤレススピーカー「ロジクール ミニブームボックス」は音もよかったよ!"

| | コメント (0) | トラックバック (0)

より以前の記事一覧