SQLの窓

2016年09月30日


イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox

大きい画像を表示する為の選択肢として、

1) window.open
2) Lightbox2
3) Shadowbox

のいずれかを選択して貼り付けコードを作成します。試してみたい場合、lightbox や shadowbox のライブラリを意識する必要はありません。ご自分でホスティングする方法は、以下のリンク先を参考にして下さい。

Lightbox2 ライブラリの今時の使い方
このユニットは以下のコードで設置できます
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/createImageUnit.js" charset="utf-8"></script>
関連する記事

JavaScript : 入力文字列を htmlentity に変換する
( Lightbox2 では、タイトル部分に htmlentity で HTML を設定できます )


タグ:Webサービス
posted by lightbox at 2016-09-30 03:16 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年08月06日


【Google ドライブウェブホスティング機能の廃止で、2016 年 8 月 31 日 で利用ができなくなります】Google ドライブの公開ページと管理ページを行ったり来たりする為のブックマークレット

Google ドライブにおけるウェブ ホスティング機能の廃止について

この機能は、Google の方針により、2016 年 8 月 31 日 で利用ができなくなります



▼ 以下古い記録になります
-----------------------------------------------------------------------------


Google ドライブを共有設定で、『ウェブ上で一般公開』すると、WEB ページを公開できるようになりますが、簡単に双方向の移動方法が用意されていないので、ブックマークレットを作成しました。

それぞれの URL で判断して切り替えるようにしています。

Google WEB切替



関連する記事

Google ドライブにWEBページを作成する方法



posted by lightbox at 2016-08-06 12:48 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年05月22日


フリーフォントでボタン素材作成のバリエーションサンプル / ノーマル・文字なし・太枠・フォント

たくさんのフリーフォント(約260種類)を使用していろいろなボタンを簡単に作成できます。

▼ 以下は jQuery で実際に動作するコンテンツです



posted by lightbox at 2016-05-22 20:19 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年05月05日


utf8 文字ツール の 文字参照リンクの作成方法



http://lightbox.on.coocan.jp/html/utf8tool.php?hex=26C4&col=FFC0CB&target=26C4,26C5,26D4,26F3,26F5,26FD,2709

この URL で utf8 文字ツール を表示すると、先頭が 0x26C4 の文字になり、26C4,26C5,26D4,26F3,26F5,26FD,2709 で指定された文字の背景を col で指定した背景色にする事ができます。(hex=26C4 は、num=9924 でも動作します)

また、この URL で表示されたページにあるボタンで表示位置を変更しても、範囲内に選択した文字があれば、背景色は変更されたまま表示されます。元の位置に戻したい場合は、F5 で再表示して下さい。



1) 右上の ● をクリックするとその文字が先頭になります 

2) 文字の下の &#nnnnn; は、HTML 上で有効な文字そのものです 

3) その下は、nnnnn を 16進数に変換したものです 

4) 一番下は、文字そのもののコードを16進数であらわしています
3種類のコード部分はクリックすると選択されるので、CTRL+C でコピーして利用しやすくなっています。 本体の文字が連続して欲しい場合は、先頭にしたい文字の右上の ● をクリックしてから、文字一覧取得ボタンをクリックしてウインドウを表示させると、その中のテキストエリアに320文字を連続して表示しています。
posted by lightbox at 2016-05-05 20:24 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年04月22日


フリーフォントでボタン素材作成

基本的なパターンのバリエーションに対して、色違いのサンプルを作成しました。

これ以外にも簡単に以下のバリエーションを作成できます
1) フォントの種類を変更
2) 文字の輪郭を別の色で作成
3) 文字を上下左右に寄せる
4) ボタンに太い枠を作成する
5) フォントサイズを変更する
6) ボタンのサイズを変更する( ドラッグでも変更できます )
7) 角丸の大きさを変更する
8) ボタンの光沢の強さを調整する
9) ボタンの文字を表示しないで作成する

光沢 : 0.6, グラデ : 50

➡ 色別

光沢 : 0.6, グラデ : 0

➡ 色別

光沢 : なし, グラデ : 50

➡ 色別

光沢 : なし, グラデ : 0

➡ 色別

光沢 : なし, グラデ : 0, ドロップシャドウ( 色:40190B )

➡ 色別

光沢 : 0.6, グラデ : 50, 文字枠色 : D44617

➡ 色別

光沢 : 0.6, グラデ : 0, 文字枠色 : D44617

➡ 色別



posted by lightbox at 2016-04-22 14:41 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年03月13日


というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました

はぴeみる電 [関西電力] の月別電力量のページで実行させて、『計算』ボタンをクリックすると、直近の12ヶ月を使って計算します。( まだ、CSS とか使って無いので美しくは無いです )



▼ ブックマークレット( ブックマークバーへドラッグ・ドロップ )
関西向け東電プレミアムプラン シュミレーション

動作確認は、Google Chrome と Firefox と IE11 です。

▼ ブックマークレットのコード
<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,l,t,z,v){var%20wnd=document.createElement('iframe');with(wnd){frameBorder=b;width=w;height=h;with(style){position='absolute';left=l;top=t;zIndex=z;display=v}}document.body.appendChild(wnd);window._bI.wnd=wnd;var%20url;url='https://secure624.sakura.ne.jp/fire30.winofsql.jp/kanden.js';wnd.contentWindow.document.write('<'+'script%20src=\''+url+'\'%20charset=\'utf-8\'></'+'script>');wnd.contentWindow.document.close();})(500,600,1,'0px','0px',1000,'');}">関西向け東電プレミアムプラン シュミレーション</a>
このコードに関しては以下を参照して下さい。

JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1)

このコードでは外部スクリプトを使用していませんが、style 要素の代わりに script 要素を使用しているだけです。また、はぴeみる電 は https なので、外部スクリプトも https でホスティングしています。

HTML の文字列化ツール実行される外部スクリプト
parent._bI.wnd.style.backgroundColor = '#ffffff';

str="";
str+="<!DOCTYPE html> \n";
str+="<html> \n";
str+="<head> \n";
str+="<meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\"> \n";
str+="<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></"+"script> \n";
str+="</head> \n";
str+="<body> \n";
str+="<pre> \n";
str+="最初の400kWhまで 固定料金 <input type=\"text\" id=\"b01\" style=\"width:50px;\" value=\"8400\">円 \n";
str+="400kWhを超える分 1kWh <input type=\"text\" id=\"b02\" style=\"width:50px;\" value=\"24.6\">円 <input type=\"button\" value=\"計算\" onclick=\"dkfunc()\"> \n";
str+=" 1 <input type=\"text\" id=\"d1\" style=\"width:50px;\"> <input type=\"text\" id=\"n1\" style=\"width:50px;\"> \n";
str+=" 2 <input type=\"text\" id=\"d2\" style=\"width:50px;\"> <input type=\"text\" id=\"n2\" style=\"width:50px;\"> \n";
str+=" 3 <input type=\"text\" id=\"d3\" style=\"width:50px;\"> <input type=\"text\" id=\"n3\" style=\"width:50px;\"> \n";
str+=" 4 <input type=\"text\" id=\"d4\" style=\"width:50px;\"> <input type=\"text\" id=\"n4\" style=\"width:50px;\"> \n";
str+=" 5 <input type=\"text\" id=\"d5\" style=\"width:50px;\"> <input type=\"text\" id=\"n5\" style=\"width:50px;\"> \n";
str+=" 6 <input type=\"text\" id=\"d6\" style=\"width:50px;\"> <input type=\"text\" id=\"n6\" style=\"width:50px;\"> \n";
str+=" 7 <input type=\"text\" id=\"d7\" style=\"width:50px;\"> <input type=\"text\" id=\"n7\" style=\"width:50px;\"> \n";
str+=" 8 <input type=\"text\" id=\"d8\" style=\"width:50px;\"> <input type=\"text\" id=\"n8\" style=\"width:50px;\"> \n";
str+=" 9 <input type=\"text\" id=\"d9\" style=\"width:50px;\"> <input type=\"text\" id=\"n9\" style=\"width:50px;\"> \n";
str+="10 <input type=\"text\" id=\"d10\" style=\"width:50px;\"> <input type=\"text\" id=\"n10\" style=\"width:50px;\"> \n";
str+="11 <input type=\"text\" id=\"d11\" style=\"width:50px;\"> <input type=\"text\" id=\"n11\" style=\"width:50px;\"> \n";
str+="12 <input type=\"text\" id=\"d12\" style=\"width:50px;\"> <input type=\"text\" id=\"n12\" style=\"width:50px;\"> \n";
str+="年間電気料金 <input type=\"text\" id=\"nd\" style=\"width:50px;\" value=\"197618\"> - <input type=\"text\" id=\"sum_result\" style=\"width:50px;\" value=\"\"> \n";
str+=" = <input type=\"text\" id=\"d_result\" style=\"width:50px;\" value=\"\"> - 基本料金 x 12ヶ月 \n";
str+="▼ 基本料金別年間節約額 \n";
str+="1) <input type=\"text\" id=\"d_1\" style=\"width:50px;\"> 2kW(30A相当) 777.6円 \n";
str+="2) <input type=\"text\" id=\"d_2\" style=\"width:50px;\"> 4kW(60A相当) 1555.2円 \n";
str+="3) <input type=\"text\" id=\"d_3\" style=\"width:50px;\"> 6kW(9kVA相当) 2332.8円   \n";
str+="4) <input type=\"text\" id=\"d_4\" style=\"width:50px;\"> 8kW(12kVA相当) 3110.4円 \n";
str+="</pre></body></html> ";
document.write(str);


function dkfunc() {
	var nwk;
	var nsum = 0;
	parent.$("#container_0_subcontainer_0_maincontent_3_ListTable tr").each(function(idx){
		if ( 0 < idx && idx <= 12 ) {
			nwk = parseInt( parent.$(this).find("td").eq(3).text() );
			$("#d"+ idx ).val(nwk);
			nwk = parseInt( (parent.$(this).find("td").eq(5).text()).replace(",","") );
			nsum += nwk;
		}
	});

	$("#nd").val(nsum);

	var b01 = parseInt( $("#b01").val() );
	var b02 = parseInt( $("#b02").val() );
	var w1,w2,w3,w4;
	w3 = 0;
	for ( i = 1; i <= 12; i++ ) {
		w1 = parseInt($("#d"+i).val());
		if ( w1 <= 400 ) {
			$("#n"+i).val( b01 );
			w3 += b01;
		}
		else {
			w2 = (w1 - 400) * b02;
			$("#n"+i).val( b01 + w2 );
			w3 += b01 + w2;
		}
	}
	$("#sum_result").val( w3 );
	$("#d_result").val( parseInt($("#nd").val()) - w3 );
	w4 = parseInt($("#nd").val()) - w3;
	$("#d_1").val( w4 - 777 * 12 );
	$("#d_2").val( w4 - 1555 * 12 );
	$("#d_3").val( w4 - 2332 * 12 );
	$("#d_4").val( w4 - 3110 * 12 );

}

※ 後から実行される関数に関しては、最初から function で定義できます。

はぴeみる電のページでは jQuery が定義されているので、本体ページの参照は parent を使用してそちらを使用しています。IFRAME 内にも jQuery はあるので、IFRAME 内はそれを使用しています。

関連する記事

電力自由化 : 関西向け東電プレミアムプラン シュミレーション


東電プレミアムプランは、沢山の電力を使う家庭で安くなるようにもともと設定されています。他のプランはよく解らないので  電力比較サイトエネチェンジ を利用するといいと思います。また、東電プレミアムプランの基本料金設定はなかなかわかり難いので、こちらの記事を参照するといいと思います

まさかの「最安プラン」?! (東京電力「プレミアムプラン」)


▼ ブックマークレット用技術関連記事
IFRAME 内に外部の javascript を読み込んで画面を作成する / document.write での構築




posted by lightbox at 2016-03-13 22:33 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

電力自由化 : 関西向け東電プレミアムプラン シュミレーション

ウチの電気使用量を初期値表示しています。おそらくこの値が正しければ、年間 33,158 円の節約になるはずです。また、この値の裏づけとして実際の今の東電管轄でのシュミレーションを行った方の記事がありますので、そちらを参照すると基本料金の考え方も良く理解できる上に、この値の信頼性も後押しされていると思います。

また、計算の元となった値は 電力比較サイトエネチェンジ 内の プレミアムプラン(1年契約)の詳細 より使用しています


最初の400kWhまで 固定料金 円
400kWhを超える分 1kWh 
 1  
 2  
 3  
 4  
 5  
 6  
 7  
 8  
 9  
10  
11  
12  
年間電気料金  - 
 =  - 基本料金 x 12ヶ月
▼ 基本料金別年間節約額
1)  2kW(30A相当) 777.6円
2)  4kW(60A相当) 1555.2円
3)  6kW(9kVA相当) 2332.8円  
4)  8kW(12kVA相当) 3110.4円

でまあ、時間があればブックマークレットで はぴeみる電 [関西電力] の値から直接計算させてやろうかなと思うのであります。

関連する記事

IFRAME 内に外部の javascript を読み込んで画面を作成する / document.write での構築

というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました


 

posted by lightbox at 2016-03-13 09:35 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年02月05日


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

2016/2/5 : ボタンの順番を変えました。
( Twitter / はてな / Facebook / Google+ )
また、自由に変えやすいようにコードに改行を挿入しました

2016/01/28 : Facebook のいいねボタンでは無く、シェアボタンに変更できるようにしました

Facebook のみ、アプリが必要になります( 966242223397117 というデフォルトの appid が使えるようです )し、Facebook のレスポンスは相当悪いのであまりおすすめではありません。Facebook は、アプリID がチェックボックスの代りになります。

ブログ等で使う場合は、URL 部分が 記事の URL になるように、テンプレート等の変数をセットするといいでしょう。

正直、Seesaa のブックマーク処理は効率が悪いようなので作成してみました。
Google+ ( 単純な Google+1ボタンにする => ) はてな Twitter
対象URL
Twitterテキスト
facebook アプリID 966242223397117 ( デフォルトの appid が使えるようです )
※ Shareボタンにする

『単純な Google+1ボタンにする』場合は、対象URL が表示されているページとなります。『単純な Google+1ボタンにする』のチェックを外すと、対象URL が必要になります。

ブログのトップベージのように、記事が複数ある場合は、上のテキストエリアのものを貼り付けて、下側のテキストエリアはページの最後に一度だけ実行されるようにします。

▼ Seesaa で、Facebook 無しの記事下に貼り付けるコード
<div> 
<table> 
<tr><td> 
<div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"> 
</td><td> 
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" style="border: none;" /></a> 
</td><td> 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<% article.page_url %>" data-lang="ja" data-text="<% article.subject %>"></a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
</td></tr> 
</table> 
</div> 

▼ Seesaa の記事 HTML の最後に貼り付けるコード( Facebook 無し ) 
<!-- 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> 
<!-- hatena --> 
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
Twitter 用としては、Seesaa では、data-text="<% article.subject %>" にする必要があります。

ボタン情報

Google +1ボタン
はてなブックマークボタン
Twitter buttons
Facebook Like Button
Facebook Share Button

関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』
Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )


posted by lightbox at 2016-02-05 21:26 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年02月04日


livedoor Blog で、Twitter カードを使用する

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

関連する記事

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

livedoor Blog のブログ設定(PC/カスタマイズ)

Twitter カードの目的を考えるて、まず個別記事ページを設定します。livedoor Blog ではすでに OGP の設定が仕様として含まれている( <$OGP$> )ので、まずその下に以下のような Twitter 用のメタ要素を書き込みます。
※ 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザID" />
<meta name="twitter:image" content="デフォルトの画像の URL" />
※ summary_large_image は大きな画像の表示です

デフォルトの画像は、記事別の画像を指定しない場合に表示される画像を URL で用意します。普通に Google の Picasa の画像が使えます。また、livedoor Blog では、この twitter:image の記述が無い場合は、『ブログアイコン』で指定した小さな画像が使われてしまいます。これは、Facebook 側(※1)で指定されているもので、Twitter カードはその指定の画像を利用することができます。
※1: <meta property="og:image" content="プロフィールアイコン(管理画面で設定)" />

なので、世の中のサンプルでは、先に OGP の記述があって、その後に Twitter カードの指定になっています。

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

Twitter カードの メタ要素の指定は、ページのどこに書かれていても有効なようです。しかも、後から見つかった内容が最後に有効になっています。ですから、以下のような記述を記事の先頭に書くだけで有効になります。
<meta name="twitter:image" content="記事用画像のURL" />
それ以外にも、livedoor Blog には見出し画像という投稿項目があるのですが、これは og:image の内容を変えるものなので、この一連の設定ではヘッダ部分にすでに Twitter カード用のデフォルト画像を指定してしまっているので、変更しても Twitter カード側が優先されて、ライブドアの見出し画像は無効になります。

ライブドアの見出し画像を使いたい場合は、twitter:image を含むメタ要素を削除する必要があります。そしてその場合は、画像を事前に livedoor Blog にアップロードしておいて選択する必要があります。

トップページ用に注意する事

『ブログ基本設定』のブログの説明は、空では動作しません。また、デフォルトの画像は、記事毎のページのものと同じである必要はありません


関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』

関連するライブドアのドキュメント

Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)




posted by lightbox at 2016-02-04 23:53 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

livedoor Blog で、Facebook の『シェアボタンを表示する』


※ テンプレートは右2カラムの『キャンバス』シリーズのうちの一つを使用しています

トップページと個別記事ページに指定しました。

両方の container にルート要素とスクリプト

appid は必要無いです(たぶんデフォルトの appid が使われると予想しています / 966242223397117 )。
<!-- ............... Container ............... -->
<div id="container">

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- ..... Title ..... -->

両方の article-social-btn にボタン用要素追加
		<div class="article-social-btn">
			<$ArticleToolBox$>
<div class="fb-share-button" data-href="<$ArticlePermalink$>" data-layout="button_count"></div>
		</div>
ArticlePermalink は、個別記事用の変数ですが、トップページに指定すると都合よく記事毎の URL に変換されました( ArticlesLoop の中ですから )

デフォルトの appid に関しては、オブジェクトデバッガーの結果より類推しています。


そもそも、シェアボタンのコード取得時に appid を持っていなくても動作するコードを取得できます。


関連する記事

livedoor Blog で、Twitter カードを使用する



posted by lightbox at 2016-02-04 23:12 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年01月15日


NAVER に問い合わせた『バグ』が五日経って対応されて返事が来ました。


前の記事

NAVER さんが問題を認めて修正してくれました。という事で『バグ』という表現を行います。

▼ 以前


▼ 対応後



▼ 問い合わせた内容
添付画像の部分の昔のコメント部分で かめこぉxxさん の画像が外部の終了あるいは危険なサイト(loda.jp)なので、画像が取得できない理由で facebook ボタンがいつまでも表示されず、かつロードしっぱなしの状態が続きます。

コメント部分を削除していただきたいのですが。
▼ 返って来た内容 ---------------------------------------------------- NAVERをご利用いただき、誠にありがとうございます。 NAVERヘルプセンターです。 お問い合わせくださいました件について、ご案内させていただきます。 このたびは、ご案内が遅れましたことを深くお詫び申し上げます。 また、弊社サービスをご利用いただく際に、 ご迷惑をお掛けしてしまい、誠に申し訳ございません。 頂戴しました情報をもとに、弊社にて調査を行いましたところ、 同様の現象を確認いたしました。 ご連絡いただきました現象につきましては、 現在修正対応が完了しておりますので、 お手数ではございますが、再度お試しいただき、 お客さまの問題が解決となるか ご確認くださいますようお願いいたします。 問題が解決されない場合は、 度々お手数ではございますが再度ご連絡くださいませ。 引き続きNAVERまとめをよろしくお願いいたします。 他にもご不明な点やお気づきの点などございます際には、 お気軽に以下《返信用URL》より、ご連絡くださいますよう、 お願いいたします。 このたびは、お忙しい中、お問い合わせくださいまして 誠にありがとうございました。 ---------------------------------------------------- とても丁寧です。丁寧すぎるくらい。それだけに『同様の現象』にはすこし『カチン』と来ました。書いた本人は無意識の表現でしょうが( 当然対応者と返事書く人は別ですから )、クレーム内容に対して以前からの自分の中の印象がこんなところで出ているのでしょう。 『同様の現象』では無く、『ご指摘の現象』が正しいです。単に、技術不足を起因とするページ表示のトラブルですから。Facebook のボタンも無事復活しました。( Facebook のボタンは仕様的に一番面倒くさくて問題になる事があります) 普段泣きたくなるような対応に毎日追われてるんでしょうね。 関連する記事( 問い合わせ ) NAVER の古いコメント部分がバグって、Facebook のボタンは表示されないわ、ロードしっぱなしだわ・・・。なので問い合わせした
posted by lightbox at 2016-01-15 21:12 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年01月10日


NAVER の古いコメント部分がバグって、Facebook のボタンは表示されないわ、ロードしっぱなしだわ・・・。なので問い合わせした



かなり前からおかしかったんですが、きっちり原因調べてみようと Google Chrome のデベロッパーツールで該当部分を見ると、コメント欄が参照している画像が、すでに終了したサービス(loda.jp)の上に、その URL にアクセスすると、Google Chrome がブロックするという、面倒くさい内容でした。

NAVER のコメントサービスは昔運用されていましたが、今は残骸だけが残っており、自分のコメントは消せるようですが、他人のコメントはどうにもならないっぽいです。
▼ これが現物です。


▼ 問い合わせた内容
添付画像の部分の昔のコメント部分で かめこぉxxさん の画像が外部の終了あるいは危険なサイト(loda.jp)なので、画像が取得できない理由で facebook ボタンがいつまでも表示されず、かつロードしっぱなしの状態が続きます。

コメント部分を削除していただきたいのですが。
その後2時間ほどで、いったんの返答が返って来ましたが、27時間経過しても対応がされた気配はありません。 ▼ 返って来た内容 ---------------------------------------------------- ご連絡いただきました件につきまして、 現在、担当部署にて確認させていただいております。 ご案内する準備が整い次第、早急にご連絡させていただきます。 大変心苦しいかぎりでございますが、 今しばらくお待ちいただけますようお願い申し上げます。 少しでも早く結果をお伝えできますよう、努めてまいりますので、 何卒ご理解ご了承のほどお願いいたします。 このたびは、ご多忙のなかご連絡くださいまして、 誠にありがとうございました。 ---------------------------------------------------- とまあ、至極一般的な状況なんですが、きちんと対応するんでしょうかね。昔 Google なんかは、バグを問い合わせた時はトンチンカンな返答返って来たしなぁ・・・・。担当部署ってのがクセもんな気がします。だいたい技術系は一般顧客ナメてる事が多い気するし、現実的に言っても、こちらが技術者とは想定しないもんね。 関連する記事( その後 ) NAVER に問い合わせた『バグ』が五日経って対応されて返事が来ました。
posted by lightbox at 2016-01-10 17:47 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2015年09月18日


CKEditor CDN を使用して、簡単に HTML コンテンツ作成エディタを利用できます

CKEditor CDN( full )
※ 最大化ボタンをクリックして利用できます


CKEditor はダウンロード可能なソフトウェアですが、設置せずとも CKEditor CDN でホスティングされているライブラリを使用してすぐに使えるようになります。

CKEditor CDN( full ) では、WEBアプリの画面を作成するのを補助する事を想定しています( 特に、TABLE 要素のメンテナンスに優れています / 他も対話式やドラッグドロップ可能なコンテンツもあります )

また、この目的に特化する為、いくつかの拡張用のコードを追加しています。

1) 全ての HTML 要素を書ける
2) p 要素を自動挿入しない
3) localStorage に保存するボタンを追加
(保存するボタン用コマンド登録時に、modes プロパティでソース表示時にも実行可能にする)
<script src="//cdn.ckeditor.com/4.5.3/full/ckeditor.js"></script>
<textarea name="editor1"></textarea>
<style type="text/css">
.cke_button__mybutton_icon {
	display: none !important;
}
.cke_button__mybutton_label {
	display : inline !important;
}
</style>
<script>
editor = CKEDITOR.replace( 'editor1', {
	allowedContent : true,
	enterMode : CKEDITOR.ENTER_BR,
	enableTabKeyTools : true
} );
editor.on( 'pluginsLoaded', function(){
	editor.addCommand( 'svData', {
		modes : { source : 1,wysiwyg : 1 },
		exec : function( editor )   {
			localStorage["_save_ck_code"] = editor.getData();
		}
	}); 
	editor.ui.addToolbarGroup( "user" );
	editor.ui.addButton( 'mybutton',   {
		label : '入力内容を保存', command : 'svData', toolbar: 'user'
	} );
	var editor_code = localStorage["_save_ck_code"];
	if(typeof editor_code == 'string'){
		editor.setData(localStorage["_save_ck_code"]);
	}
});
</script>

ボタンのテキストを表示させる為に、強制的に CSS を変更していますが、ボタンのラベルがデフォルトで非表示となっている為です。( アイコンを利用したい場合は、background で指定し直します )
.cke_button_label {
    display: none;
    padding-left: 3px;
    margin-top: 1px;
    line-height: 17px;
    vertical-align: middle;
    float: left;
    cursor: default;
    color: #474747;
    text-shadow: 0 1px 0 rgba(255,255,255,.5)
}
参考ページ

CKEDITOR.config
CKEDITOR.ui
CKEDITOR.editor

ボタンの追加だけでは、テキストがボタンに表示されなかったので、CSS で対応しています。




posted by lightbox at 2015-09-18 18:20 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする

2015年05月08日


Android の Twitter のブラウザが、『rem』という単位を理解できずに、巨大なサイズになってしまった件

▼ こんな感じになります。


下のほうの薄いのは広告が表示される瞬間でキャプチャしたのでこんな感じになっています。

環境は、Seesaa のスマホ用のものです。最初何の事がさっぱり解らなかったのですが、古いスマホページのデザインではならずに最新のものだとこうなります。Android の Chrome ではなりません。iPhone( 8.3 ) の Twitter アプリではならないです。Android(4.4.4) Twitter(5.57.0) の環境でなります。

どうも BODY の CSS が怪しいと思い、見てみると以下のようになっていました。
body {
  font-size: 14rem;
  line-height: 1.4;
  color: #333333;
  background: #F1F1F1;
}
え? 『rem』? という事で、CSS 内の rem を全て px に変更すると正しく表示されるようになりました。結局 Twitter アプリのバグっぽいですね。

※ ちなみにハードは KYOCERA DIGUNA U です。



posted by lightbox at 2015-05-08 23:37 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2015年03月15日


画像を大きく見る為のウインドウを開くボタンの作成するサービス

▼ このページへのリンク


Lightbox や Shadowbox のような JavaScript ライブラリはとてもかっこよく表示できるのでとても自己満足はできるのですが、イザその画像の詳細を見たくて実際のサイズで見たいときにはあまり意味がなかったり。特に、イラストを作った直後で、ブログに貼り付けてから再度見直したい時にはなんか違うなぁ(画像小さいし)・・・・なんて思う事もあったので、単純に大きく開くボタンを作ってはみたのですが、結構コードが長くて使いまわしがつらかったので作りました。

『関数にすれば?』

という意見も頭の中には少しあったのですが、このほうがイラスト毎に後から開いたウインドウの背景をカスタマイズできるので、これでいいかなと思いました。

▼ 通常ボタン
 

上で開くイラストは、背景が透過しているのでこんなふうにカスタマイズできます。

▼ インラインに JavaScript で背景を追加したカスタマイズボタン
 

5行目が追加部分です
<input type="button" value="最大表示" onclick='
	var w=1000,h=860;
	hwin=window.open("about:blank","","width="+w+",height="+h+",scrollbars=yes,resizable=1,left="+(screen.width-w)/2+",top="+(screen.height-(h+100))/2);
	hwin.document.write("&lt;img src=&#92;&#34;https://lh6.googleusercontent.com/-	FQO8GbFoAUI/VQVVLysRSzI/AAAAAAAAY1g/trUU_gZMCkQ/s1200/Aiko6_maid.png&#92;&#34;&gt;");
	hwin.document.body.style.background="url(https://lh5.googleusercontent.com/-yzSGYSSjnFo/VP8HrL7VPLI/AAAAAAAAYts/r_GE5g8ee9s/s1200/marge_city_a01.png) no-repeat 0px 100px";
'> 



posted by lightbox at 2015-03-15 22:30 | Comment(0) | WEBサービス | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり