SQLの窓

2016年12月13日


Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って jQuery で順序をソートする

Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って 10 番毎の数字にリセットする の続きですが、ソートするとなるといったん配列にデータをため込む必要があります。

ここでは、_sortdata と言う変数を使用していますが、なんでもかまいません。Seesaa のカテゴリ管理画面で F12 でデベロッパーツールを開き、_sortdata が存在しない事を確かめればいいです。

ソートするので、sort メソッドを使用しますが、ソート対象はオブジェクトになるので、比較関数を実装する事になります。

オブジェクトは、{ title: "文字列", sort: jQueryの番号フィールドのオブジェクト } と言う形式で作成しているので、以下のソースのように title だけ見てソートさせます。

そののち、jQuery の $.each と言う、配列の処理用のメソッドを使ってソートされた順に数値をセットしていくだけです。



$(this).parent().parent().find("input") は、$(this) が td の中の アンカーです。その親の親となるのは、テーブルの tr になるわけです。なので、その中から必要な 入力フィールドを find で取得しています。
var _sortdata = [];
$(".wordlimit").each(function(){
   _sortdata.push({ title: $(this).text(), sort: $(this).parent().parent().find("input") })
});
_sortdata.sort(function(a,b){
   if ( a.title < b.title ) {
      return -1;
   }
   else {
      return 1;
   }
});
$.each(_sortdata,function(idx,val){
   _sortdata[idx].sort.val( idx*10+100 );
})
※ Google Chrome で、コンソールでタイプして作成しました




Seesaa独自タグ簡易リファレンス

タグ:jquery Seesaa
posted by lightbox at 2016-12-13 19:18 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って 10 番毎の数字にリセットする

こえいう作業に、jQuery は最適で、いまどきはどこでも jQuery がページで使えることが多いです。Seesaa の管理画面でも使用可能なので、F12 でコンソールを開けて、まず入力フィールドのグループを取得します。

F12 で開いているデベロッパーツールのインスペクタで入力フィールドを調べれば、対象の入力フィールドは以下の記述で取得できる事が解ります。
$( "input[name*='sort_number']" )

これだけでは、目的は達成できないので、おのおののフィールド毎の処理にする為、.each でループ処理にします。
$( "input[name*='sort_number']" ).each(function(){
   console.log( $(this).val() );
})

これで目的はほぼ達成されたようなものですが、function(idx){} という連番が使えるので以下のようにすると完成です。
$( "input[name*='sort_number']" ).each(function(idx){
   $(this).val(idx*10+100);
})

ぜひ、Seesaa のカテゴリ管理画面で実行してみてください。

ちなみに、この方式で行くと『リンク』は以下のようになります
$( "input[name$='content_link__sort_number']" ).each(function(idx){
   $(this).val(idx*10+100);
})
※ エキスパートモードからでないと、失敗する可能性があります。



Seesaa独自タグ簡易リファレンス

posted by lightbox at 2016-12-13 12:54 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2016年02月05日


Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )

かなり前から、Seesaa のソーシャルボタンが表示されなくなったのは気がついていたのですが、どうせ仕様変更だろうと放置していましたが、少し気になったので調べてみるとやはりそうでした。( 2013-06-05 時点の記述です )

Seesaa の公式の内容

設定> 詳細設定> ソーシャルボタン: ブログ・ヘルプ

内容は、『リニューアルに伴うテンプレート記述方法の変更』です。つまり、古い仕様で書かれている部分を新しくして下さいとの事。

まず、古い記述( 記事コンテンツの HTML 部分の 『posted by』の直前にあります )
<% if:blog.bookmark_service %>
<script type="text/javascript" language="javascript" charset="utf-8">
//<![CDATA[
seesaa_bookmark_services = "<% blog.bookmark_service %>";
seesaa_article_page_url = "<% article.page_url %>";
seesaa_article_subject = "<% article.subject | remove_emoji | jsescape | tag_strip %>";
seesaa_blog_url = "<% site_info.blog_url %>";
//]]></script>
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>
<% /if %>
この仕様では、毎回 JavaScript が読み込まれて実行されていましたが、昨今 PC や通信速度の向上より、一括でやったほうがいいとなったのだと思います。よって以下のようにまるごと変更
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>
で、一括部分は、『記事コンテンツ』の HTML 部分の最後のところに以下の内容を追加します。
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bl-bookmarks.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
var bookmark_services = "<% blog.bookmark_service %>".split('-').join('').split(",");
var seesaaBookmarks = new blBookmarks({bookmark_services:bookmark_services, blog_url:"<% site_info.blog_url %>"});
seesaaBookmarks.exe();
</script>
但し、このままでは横に並ばないので、外部 CSS を ヘッダ部分に追加します。
<link rel="stylesheet" href="http://blog.seesaa.jp/css/user-common.css" type="text/css" />

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得

▼ 2013-06-05 時点では Google+ はブックマークの中だった
で、ここからが改造。以前から Google+ ボタンとは相性が悪かったせいか(どうかは解りませんが)、はてなブックマーク、Facebook、Twitter 以外のボタンは『ブックマーク』としてまとめられるみたいなので、Google+ボタンを外に出るようにしてみました。
現在は改造しなくても外に出てるようです

※ よって、以下は現在必要ありません。
外には出るんですが、バグってるみたいです。結局下のようにしなきゃなりません。また、その場合は Seesaa の設定の Google+ ボタンは OFF にします。

まず、最初に変更した部分の DIV の中に Google+ 用の DIV を貼り付けます。
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"><div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"></div></div>
<% /if %>

そして、記事コンテンツの HTML の最後に以下を貼り付けます
<!-- google --> 
<script type="text/javascript"> 
  (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
  })(); 
</script> 
そして、CSS を追加すれば、Google+ ボタンは一番左になってしまいますが、使えるはずです。
これは使わなくていいです。右端に並ぶはずです。
.bookmark div {
	float: left!important;
}

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得




Seesaa独自タグ簡易リファレンス

タグ:Seesaa SNS ブログ
posted by lightbox at 2016-02-05 21:25 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2016年01月25日


Seesaa ブログで Twitter カードを使用する方法

Twitter カードは、ツイート内に投稿された URL 先のメタ要素を参照してツイートに画像や概要等を付加するルールです。( PC の場合は『全て表示』するとと表示されますが、スマホアプリからだと最初から表示されます)

▼ Android アプリにて


画像は固定にするのならばとても簡単です。今すぐにでも簡単に始める事ができます。

デザインから『記事』コンテンツを開いて HTML の先頭に以下のように書き込んで保存するだけです
( 単独の記事ページのみの設定ですが、意味が解れば他のページにも応用できます )
<% if:page_name eq 'article' -%>
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:image" content="画像のURL" >
<meta name="twitter:site" content="@ユーザ名" >
<meta name="twitter:title" content="<% article.subject | tag_strip %>">
<meta name="twitter:description" content="<% article.body | tag_strip | oneline | text_summary(100) %>">
<% /if -%>

※ Seesaa の変数で記事情報を得るには、記事コンテンツで書く必要があります

記事毎に画像を変えるには

さすがに記事毎に画像を設定するには Seesaa だけでは無理があるので、外部サイトより PHP ページを呼び出して画像として扱います。
記事内で META 要素で画像を指定すると、後から記述した記事内の情報が優先されました。これで、Seesaa 内で簡単に完結できます。


▼ 外部で画像を用意する方法
パラメータとしては、記事 id を使うと都合がいいので、記事を書く場合は最初は必ず 『非公開』で保存します。保存すると、Seesaa の記事投稿ページの URL に id が表示されるのでコピー&ペーストで利用します。
<meta name="twitter:image" content="http://サイトドメイン/フォルダ/画像取得.php?id=<% article.id %>" />

画像取得.php の内容は、データベースを使わない場合は以下のようになります
<?php
$_GET['img'] = 'http://winofsql.jp/logicalerror_k.jpg';
$type = "Content-Type: image/jpeg";


if ( $_GET['id'] == '431370653' || $_GET['id'] == '431586073' ) {
	$type = 'Content-Type: image/png';
	$_GET['img'] = "https://lh3.googleusercontent.com/-rcXr0TEtK9U/VneXBjsS7LI/AAAAAAAAc4c/V3aID9ySqMU/s600-Ic42/_img.png";
}
if ( $_GET['id'] == '430950219' ) {
	$type = 'Content-Type: image/png';
	$_GET['img'] = "https://lh3.googleusercontent.com/-rktBELHhoNY/VmhbqJ_Y8zI/AAAAAAAAc1U/2NdaaXuGO-U/s600-Ic42/_img.png";
}


header($type);

$pi = pathinfo($_GET['img']);
$ext = strtolower($pi['extension']);

if ( $ext == 'png' ) {
	$im = @imagecreatefrompng($_GET['img']);
}
if ( $ext == 'gif' ) {
	$im = @imagecreatefromgif($_GET['img']);
}
if ( $ext == 'jpg' || $ext == 'jpeg' ) {
	$im = @imagecreatefromjpeg($_GET['img']);
}

// 失敗
if(!$im) {

	//空の画像
	$im  = imagecreatetruecolor(200, 200);			// 200x200
	$bgc = imagecolorallocate($im, 255, 255, 255);		// 背景色(白)
	$tc  = imagecolorallocate($im, 0, 0, 0);		// 文字色(黒)

	imagefilledrectangle($im, 0, 0, 200, 200, $bgc);	// 背景を塗る

	// メッセージ
	// (5,5) は座標
	imagestring($im, 1, 5, 5, 'Error loading', $tc);

}
else {

	imagealphablending($im, false);
	imagesavealpha($im, true);

}

imagepng($im);
imagedestroy($im);

?>


このままでは、どんどんソースコードが長くなるので、データベースが使える場合は以下のようにして、データベースにデータを追加する事によって新しい記事に対応します。
<?php
$_GET['img'] = '画像データがない場合のデフォルトJPG画像の URL';
$type = "Content-Type: image/jpeg";

$host = "";
$db = "";
$user = "";
$pass = "";

$link = mysqli_connect($host, $user, $pass, $db);
mysqli_set_charset($link, "utf8");

$sql = "select * from links where target2 = '{$_GET['id']}'";
$result = mysqli_query($link, $sql);
if ($result) {
	if ( $row = mysqli_fetch_assoc($result) ) {
		$_GET['img'] = $row['URL'];
	}
}

$pi = pathinfo($_GET['img']);
$ext = strtolower($pi['extension']);
if ( $ext == 'png' ) {
	$type = 'Content-Type: image/png';
	$im = @imagecreatefrompng($_GET['img']);
}
if ( $ext == 'gif' ) {
	$type = 'Content-Type: image/gif';
	$im = @imagecreatefromgif($_GET['img']);
}
if ( $ext == 'jpg' || $ext == 'jpeg' ) {
	$type = 'Content-Type: image/jpeg';
	$im = @imagecreatefromjpeg($_GET['img']);
}

header($type);

// 失敗
if(!$im) {

	//空の画像
	$im  = imagecreatetruecolor(200, 200);			// 200x200
	$bgc = imagecolorallocate($im, 255, 255, 255);		// 背景色(白)
	$tc  = imagecolorallocate($im, 0, 0, 0);		// 文字色(黒)

	imagefilledrectangle($im, 0, 0, 200, 200, $bgc);	// 背景を塗る

	// メッセージ
	// (5,5) は座標
	imagestring($im, 1, 5, 5, 'Error loading', $tc);

}
else {

	imagealphablending($im, false);
	imagesavealpha($im, true);

}

imagepng($im);
imagedestroy($im);

?>


画像は自分で用意するので、mime タイプは拡張子で決定しています。

結果のチェック

うまくいっているかどうかは投稿すれば解りますが、Twitter に投稿せずに確認するには、Twitter のチェックページを使用します

Card validator

補足事項

世の中のこの手の情報は、Facebook とともに記述されている事が多いですが、Seesaa で Facebook の OGP で記事別画像を実現するには相当の技術的知識が必要なので最初からあきらめたほうがいいです。その理由は、Facebook 用のメタ要素は必ず HEAD 要素内に書く必要があるのに対して、Seesaa では、その情報を用意するのに、通常では BODY 要素内に書かざるを得ないからです。

がんばれば、実現できますが、相当の準備をもって臨まないと HTML が壊れてしまいますし、実現することによって発生する弊害の対応も発生するのでおすすめできません。

※ 記事タイトルは、Seesaa でも HEAD 内で変数を指定できます
<% if:page_name eq 'article' -%>
<meta property="og:type" content="article" />
<meta property="og:title" content="<% extra_title %>" />
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP" />
<% /if -%>




Seesaa独自タグ簡易リファレンス

posted by lightbox at 2016-01-25 04:18 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年11月12日


IE拡張メニュー : Seesaa のリンクコンテンツを一瞬でソートする

ソートしても、Seesaa で更新するまで反映されません。


インストールは、ダウンロードした zip 書庫を解凍して、中の ie_seesaa_linksort.wsf をエクスプローラからダブルクリックして下さい。そうすると、メッセージボックスで更新しても良いかと聞かれるので「OK」を選択して下さい。
※インストールしたあと、既にIE が実行している場合はいったん閉じて下さい

アンインストールは以下のコマンドをコマンドプロンプトから実行して下さい
reg delete "HKCU\Software\Microsoft\Internet Explorer\MenuExt\Seesaa 用リンクソート"
▼ アンインストール実行画面
何も押さずにそのまま実行すると、タイトル内容でソートします。

SHIFT キーを押しながら実行すると、
URL のアーティクル番号の大きい順にソート

CTRL キーを押しながら実行すると、
URL のアーティクル番号の小さい順にソート

※ 必ずしもアーティクル番号が正しい順序とは限りませんが、数字の桁が同じであれば、新しい順または古い順になります
意図的な順序の場合は手作業でするしかありませんが、多くなってきて読む人が探しやすいようにするには、やはり通常のソートするのが一番です。

Seesaa独自タグ簡易リファレンス

タグ:Seesaa IE拡張
posted by lightbox at 2014-11-12 14:43 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年09月27日


Seesaa の特定のカテゴリ(複数)の場合のみ、記事の下に参照リンクやコンテンツを付加する方法

Seesaaブログの page_name 変数の3つ以上の OR 条件の記述方法 の発展形です。上記の場合は、HTML テンプレート内で書きましたが、今回は「記事コンテンツ」内です。

(重要)
article_category 変数は、以下のループの中でのみ有効です。OR 記述が有効なのは、article_category 等の単独変数のみで、article.category という変数には使用できません。
<% loop:list_article -%>
<% /loop -%>
特定のカテゴリ(複数)の場合のみ、記事の下に参照リンクやコンテンツを付加します。

どうやら、変数の種類によって「できる、できない」があるようで、カテゴリ名ではできませんでした。OR 条件の書き方のルールとしては、これではっきりしましたが常に2項になるように「かっこ」でくくればいいようです。
<% if: (((article_category eq '10046946') + (article_category eq '10046812')) + ((article_category eq '10047034') + (article_category eq '10046894'))) + (((article_category eq '10046774') + (article_category eq '10046952')) + (article_category eq '10047062') ) -%>

<div class="listCategoryArticle" style='margin-top:15px;'>
【VBScript関連のカテゴリ】<br />
<ul>
<li><a href="http://logicalerror.seesaa.net/category/10046946-1.html">VBS + ADO</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10046812-1.html">VBS + JavaScript</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10047034-1.html">VBS + Shell</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10046894-1.html">VBS + WMI</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10046774-1.html">VBS + インターネット</a>
<li><a href="http://logicalerror.seesaa.net/category/10046952-1.html">VBS + ファイルシステム</a>
<li><a href="http://logicalerror.seesaa.net/category/10047062-1.html">VBS + 特殊オブジェクト</a>
</ul>
</div>

<% /if -%>





Seesaa独自タグ簡易リファレンス

タグ:Seesaa
posted by lightbox at 2014-09-27 15:14 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり