iphoneのframeブラウズ

先日iphoneに買い換えました(3GS)。
Wi-Fiでつながるからネットの閲覧が早く快適になっています。
そこでうちのHpをみて見ると、Ifreamのコンテンツがスクロールせずに全て表示されレイアウトが崩れてました。
フッターを画面下部に固定するレイアウトのためとりあえずjqueryを使っているのでhide()でフッターを消し去っていますが、

通販のページはoverflowを使った擬似frameでヘッダー、左にメニュー右にコンテンツとフッターの構成にしており、メニューとコンテンツをoverflow:autoではみ出す内容をスクロールするようにしていましたが、

iphoneの小さな画面で二本指でスクロールするのはcontentsはともかくメニューの小さいサイズは面倒でした。

iphoneはjavascriptが使えるsafariなのでuserAgent で振り分けられます。

通販のページもjqueryを使ってるので、idで操作して閲覧しやすくしました。
if(navigator.userAgent.indexOf('iPhone')!=-1){　
$('#content,#menu').css('overflow','visible');
$('#footer').hide();
}

※フッター位置がcontentsのスクロール無しのhightをうまく収得できずに隠してごましていますが(^_^;)

一部文字の描写がくずれていますが、テストするたびにアップロードするのも面倒で、ローカルでテストしたいところだが、 windows用のsafariがappleからてでいますが、何度やっても起動前に落ちて起動できず･･･そのまま放置･･･

BLOGEERクラシックテンプレート 最近のコメント取り出し３

BLOGGER　クラシックテンプレート直近コメントの取り出し
BLOGEERクラシックテンプレート　最近のコメント取り出し２で
コメントや最近のエントリーをjavascriptでの取出しを記載していましたが、
いつの間にか、json形式で引っ張ってくるデータの順序が変わっていて、でたらめ なリンク先を取り出していたので修正しました。

（いつからやってんやろ･･･汗ゞ)

function commentcallback(obj) {
var data = obj;
var InsertHTML = '<h2 class="sidebar-title">直近のコメント5件<\/h2>';
InsertHTML += '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
//var anchor=data.feed.entry[i].link[0].href.replace(/(\?[\w]+\=[0-9]+)/, "");
var anchor=data.feed.entry[i].link[2].href.replace(/(\?[\w]+\=[0-9]+)/, "");
InsertHTML+= ('<li><a href="'+anchor+'">');
//InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,24));if (data.feed.entry[i].summary.$t.length > 24) {InsertHTML+= ('...');}
InsertHTML+= (data.feed.entry[i].title.$t.substring(0,22));if (data.feed.entry[i].title.$t.length > 22) {InsertHTML+= ('...');}
InsertHTML+= ('<\/a><br \/>');
InsertHTML+= ('['+data.feed.entry[i].published.$t.substring(2,10)+']');
InsertHTML+= (' by '+data.feed.entry[i].author[0].name.$t);
InsertHTML+= ('<\/li>');
}
InsertHTML += '<\/ul>';
document.getElementById('commentcallback').innerHTML = InsertHTML;
}

function newentry(obj) {
var data = obj;
var InsertHTML = ('<h2 class="sidebar-title">最近のエントリー10件<\/h2>');
InsertHTML += '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
InsertHTML+= ('<li>');
//InsertHTML+= ('<a href="'+data.feed.entry[i].link[0].href+'"><b>');
InsertHTML+= ('<a href="'+data.feed.entry[i].link[4].href+'"><b>');
InsertHTML+= (data.feed.entry[i].title.$t.substring(0,22));if (data.feed.entry[i].title.$t.length > 22) {InsertHTML+= ('...');}
InsertHTML+= ('<\/b><\/a><br \/>');
InsertHTML+= ('['+data.feed.entry[i].published.$t.substring(2,10)+']');
InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,36));if (data.feed.entry[i].summary.$t.length > 36) {InsertHTML+= ('...');}
InsertHTML+= ('<\/li>');
}
InsertHTML += '<\/ul>';
document.getElementById('newentry').innerHTML = InsertHTML;
}

BLOGEERクラシックテンプレート 最近のコメント取り出し２

BLOGGER　クラシックテンプレート直近コメントの取り出しで
<script type="text/javascript" src="http://www.blogger.com/feeds/8216413096516145501/comments/summary
?alt=json-in-script&callback=commentcallback&max-results=5"></script>
でjson形式でデータを呼び出しているが、

data.feed.entry[i].link[0].href　の値が
http://blog.peaks-jp.com/2008/02/javascript.html
?showComment=1211451300000#c4957769072170915326
となるので、赤字の部分は必要無いので(多分？)
下記の赤字のように修正して削除しました。これで多少すっきりしたかな･･･

<div id="commentcallback"></div>
<script type="text/javascript"><!--
function commentcallback(obj) {
var data = obj;
var InsertHTML = '<h2 class="sidebar-title">直近のコメント5件<\/h2>';
InsertHTML += '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
var anchor=data.feed.entry[i].link[0].href.replace(/(\?[\w]+\=[0-9]+)/, "");
InsertHTML+= ('<li><a href="'+anchor+'">');
InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,24));if (data.feed.entry[i].summary.$t.length > 24) {InsertHTML+= ('...');}
InsertHTML+= ('<\/a><br \/>');
InsertHTML+= ('['+data.feed.entry[i].published.$t.substring(2,10)+']');
InsertHTML+= (' by '+data.feed.entry[i].author[0].name.$t);
InsertHTML+= ('<\/li>');
}
InsertHTML += '<\/ul>';
document.getElementById('commentcallback').innerHTML = InsertHTML;
}
--></script>
<script type="text/javascript" src="http://www.blogger.com/feeds/8216413096516145501/comments/summary?alt=json-in-script&callback=commentcallback&max-results=5"></script>

BLOGEERクラシックテンプレート 最近の投稿の内容表示

bloggerのクラシックテンプレートでは下記のように最近の投稿を10件表示するようになっているが、（クリボウの Blogger Tips: 「最近の投稿」リストあれこれが大変参考になります。）

<h2 class="sidebar-title">Previous</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

これを最近のコメントを表示するBLOGGER　クラシックテンプレート直近コメントの取り出し見たいな感じでjavascriptを使い、最近の投稿リストからタイトルと本文の一部を取り出すスクリプト。

<div id="newentry"></div>
<script type="text/javascript"><!--
function newentry(obj) {
var data = obj;
var InsertHTML = ('<h2 class="sidebar-title">最近のエントリー10件<\/h2>');
InsertHTML += '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
InsertHTML+= ('<li>');
InsertHTML+= ('<a href="'+data.feed.entry[i].link[0].href+'"><b>');
InsertHTML+= (data.feed.entry[i].title.$t.substring(0,28));
InsertHTML+= ('<\/b><\/a><br \/>');
InsertHTML+= ('['+data.feed.entry[i].published.$t.substring(2,10)+']');
InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,39));if (data.feed.entry[i].summary.$t.length > 39) {InsertHTML+= ('...');}//切り取り文字数を40以上にするとie7で止まります。
InsertHTML+= ('<\/li>');
}
InsertHTML += '<\/ul>';
document.getElementById('newentry').innerHTML = InsertHTML;
}
--></script>
<script src="http://www.blogger.com/feeds/自分のblogid/posts/summary?alt=json-in-script&callback=newentry&start-index=1&max-results=10" type="text/javascript"></script>

とまぁいつまでたってもテンプレートの修正ばかりしているのは、ただ単にサブドメインの使えるサーバーを借りていて、サブドメイン blog.peaks-jp.com で運用したいためだけですけど･･･後は、バックリンク関係の見直しと、前のページ、後ろページのリンクの製作と、タグリストでのページ表示時にタグ名を表示するっていうのを作ってみようと思ってます。

BLOGGER タグリスト(クラシックテンプレート)

BLOGGERでFTP公開サイト用のタググラウンドのつづき。
以前BLOGGER　FTP公開サイトのラベルでの分類方法に書いたが、
今回はタグの項目数も取り出してみた。

<?php
$dir = 'サーバーのlavelsのパス';#ラベルのパス
$url = 'http://blog.peaks-jp.com/labels/';
$labellist ="<h2 class='sidebar-title'>".mb_convert_encoding("ラベルリスト", "EUC-JP", "sjis")."</h2><ul class='archive-list'>";

if($handle = opendir($dir)) { #ディレクトリハンドルを獲得
while(false !== $file = readdir($handle)){ #ファイル名獲得
list($filename,$html) = split("\.", $file); #ファイル名と拡張子を分割
if(!$filename){continue;}
$filename = str_replace("__", "/", $filename); #ファイル名にするためbase64で/が__に変更されているのを戻す
$labellist .="<li><a href='$url$file'>";
if (preg_match("/=([A-F0-9]{2})/",$filename)) {
# $labellist .= quoted_printable_decode ($filename); #quoted_printable_decodeでローマ字+日本語に変換
$labellist .= mb_convert_encoding(quoted_printable_decode ($filename), "EUC-JP", "UTF-8") ;#BLOGで設定しているcharsetに合わす場合
}elseif(mb_detect_encoding(base64_decode($filename)) == "UTF-8"){
# $labellist .= base64_decode($filename) ; #encodingがUTF-8ならbase64_decodeで日本語変換
$labellist .= mb_convert_encoding(base64_decode($filename), "EUC-JP", "UTF-8") ; #BLOGで設定しているcharsetに合わす場合
}else{
$labellist .= $filename ; #ローマ字のファイル名はそのまま表示
}
$labelhtml = file_get_contents("$dir$file");
if (preg_match_all( "/<h3 class=\"post-title\">(.*)<\/h3>/i",$labelhtml,$titlename)){
$labellist .="(".count($titlename[0]).")<br />";
# foreach( $titlename[1] as $val2){$labellist .="$val2<br />";}
}
$labellist.="</a></li>";
}
}
closedir($handle); #ディレクトリハンドルを閉じる
$labellist .="</ul>";
header ("Content-Type: text/html; charset=EUC-JP");#javascriptとしてEUC-JPで表示する(環境に合わす必要があります)
echo "document.write(\"";
echo $labellist;
echo "\");";
?>

という感じで変数に代入しjavascriptで書き出します。

Labelグループのフォルダにあるファイルを1件ずつ取り出しファイルを読み込んで
テンプレートで使われる<h3 class=\"post-title\">(.*)<\/h3>を探して件数を数えています。
$dir = 'サーバーのlavelsのパス'　の指定をアーカイブに変えたらアーカイブも取り出せます。
$titlename[1]にすると、タイトルだけの取り出しもできますよ

BLOGGR+GOOGLEAPIテンプレート

先日から書き換えてたテンプレートは、http://ajaxsearch.blogspot.com/を参考にajax apiを組み込んだ。

ビデオサーチ
マップサーチ
ビデオバーサーチ

なんかには、ウイザードがあるから簡単にBLOGに組み込めますよ～

デザイン変更

先日から、ブログデザインをいらってばかりいる。

とりあえず、アーカイブもphpでファイル操作して、JavaScriptで書き出してみたり、
色を変えてみたりとやっているが、ゴヂャゴチヤしてきた･･･

もう少し大胆なシンプルをテーマに考えてみよう。重くならない程度に。

今後の課題として、ラベルのURLを、例えばダメージヘア.htmlとなる日本語が
BLOGGERで
44OA44Oh44O844K444OY44Ki44O8.htmlって変換されるが
これを
%e3%83%80%e3%83%a1%e3%83%bc%e3%82%b8%e3%83%98%e3%82%a2%e3%83%bc.html
になるよう変換方式を変えてみる。

で、あとページ送りを日付順でリスト化して読み込むのと
タグリスト項目に件数をつけるのと、ページタイトルを読み込ませて記載内容をわかりやすくする。
手っ取り早いのは、サムネイルで表示か？

BLOGGER クラシックテンプレート直近コメントの取り出し

BLOGGERのFTP公開typeのクラシックテンプーレートのカスタマイズ。

最近のコメント問題を参考にJSONを使いJAVASCRIPTでFTP公開サイトでもサイドバーの好きな位置にテンプレートに書き込めば表示されます。

下記の場合は5件のみ表示し、日付を［yy-mm-dd］の表示文字数にしています。

<h2 class="sidebar-title">直近のコメント5件</h2>
<div id="recent_comment_list"></div>
<script type="text/javascript"><!--
function recent_comment_callback(obj) {
var data = obj;var statusHTML = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');
statusHTML+= (data.feed.entry[i].summary.$t.substring(0,32));
if (data.feed.entry[i].summary.$t.length > 32) {
statusHTML+= ('...');
}
statusHTML+= ('<\/a><br \/>');
statusHTML+= ('<span class="item-date">['+data.feed.entry[i].published.$t.substring(2,10)+']<\/span>');
statusHTML+= ('by<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'<\/span>');
statusHTML+= ('<\/li>');
}
statusHTML += '<\/ul>';
document.getElementById('recent_comment_list').innerHTML = statusHTML;
}
--></script>
<script type="text/javascript" src="http://www.blogger.com/feeds/自分のblogID/comments/summary?alt=json-in-script&callback=recent_comment_callback&max-results=5"></script>

BLOGGER ページurlの取り出し

タイトルに対してそれ自身のURLの取り出しはJavascriptでテンプーレートで使われているtitle=permanent linkを利用して取り出しています。

window.onload=function(){
var linkNode=document.getElementsByTagName("a");
for(var ii=0;ii<linkNode.length;ii++){
if(linkNode[ii].title=="permanent link"){
var ele = document.createElement("span");
　　ele.innerHTML = "<input type=\"text\" name=\"url\" size=\"80\" value=\""+linkNode[ii].href+"\" onfocus=\"this.select()\" />";
linkNode[ii].parentNode.appendChild(ele);
}}}

あし＠はりつけ

あし＠を貼り付けたのはいいが、レイアウトの自由度が無いので少しいらってみた。
position: relative　の配下に position:absolute　であし＠のプログラムでの書き込みをしたら
好きな位置に持ってこれますよ～

って2日かかった･･･

マウス座標を収得してその位置にプロフィールを表示するようにしようとしたが･･･

cssでpositionの指定は親要素も関係するってどこかでみたので、うちの場合は(relativeで指定)
idをつけたタグの子要素に書き込むように少しプログラムを書き換えて、
その下にがくるように配置した。

とりあえず、気が向いたら色味を修正しようかと思う。

さっこれから仕事のデータ入力しようっと。

javascriptで簡単設定イメージ画像拡大スクリプト

イメージを拡大表示するのにおしゃれなのは、lightboxやhighslideがありますがページの修正やcssの追加とか、タイプによればaltの設定とかid、class属性の追加など表示枚数が少なければいいが、100枚、200枚となってくるとちょっと…、
というわけでシンプルに組み込めるのを作ってみました。
とりあえずimgpickup_shadow.jsをダウンロードして(UTF-8で保存)
<head>.....</head>の間に、
<script src="http:**アドレス**/imgpickup_shadow.js" type="text/javascript"></script>
と挿入するだけでリンク属性が画像を指している場合は勝手に背面にシャドーがかかり画像が中央に表示されます。
DOCTYPEの指定無しタイプも作動します。(多分)IE7,IE6とFF2でテスト済み。

不具合は保障しませんけど、使いたい方は使ってください。
質問はコメント欄へお願いします。

• onloadで他に命令されている場合はうまくいかないときもあります。


• リンクに設定されているのonclickよりも優先します。