SQLの窓

2016年02月27日


Picasa が終了するので、Google フォトで登録した画像の URL を Picasa の API で取得する手順


※ この画像は Google フォトで登録して Picasa API で取り出した URL を使用しています

Picasa Web Albums Data API の【重要】を読む限り、読み込みはサポート続きそうなので、以下の方法でしばらく対応できると思います。内容は簡単なので、JavaScript でもアルバムとか作れそうですし。( access-control-allow-origin: * である事は確認しました )

自分の ユーザID

Picasa の設定ページでもいいですが、アルバムや画像を表示した時にドメインの次に表示される数字です。これを使うとまずアルバムの一覧を取得できます。

https://picasaweb.google.com/data/feed/api/user/101280392108947207617?alt=json

アルバムの IDとプロパティの絞込み

ほぼこれで目的は達成されます

https://picasaweb.google.com/data/feed/api/user/101280392108947207617/albumid/6125016770423395377?alt=json&fields=entry%28content%29&imgmax=1600

imgmax=1600 は、適当でいいです。s1600 となるだけなので後で調整しますし。最初から s500 が欲しいのならば、imgmax=500 とするだけです。fields パラメータは、省略すると全てのデータを取得できます(正直必要無いです)

これだけでは該当する画像から URL を取り出すのがたいへんなので、JavaScript で 1時間くらい格闘すれば自分専用の URL 取得アプリは簡単に作れそうです。


関連する記事

Picasa が終了するので、Picasa ブログの英文を解りやすく翻訳して整形しました

jQuery Columns を使って、Picasa API より アルバム一覧を表示する



タグ:google
posted by lightbox at 2016-02-27 14:19 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2016年02月25日


Picasa が終了するので、Picasa ブログの英文を解りやすく翻訳して整形しました

▼ オリジナル
Moving on from Picasa

※ 冗長部分は省いています

Googleフォトの発売以来、私たちは、これはPicasaの将来のために何を意味するのか多くの疑問を持っていました。多くを考慮した後、我々は、Googleフォトで写真サービスに完全に集中するために、今後数カ月でPicasaを終了することを決定しました。我々は二つの異なる製品間での努力を分けるのではなく、より多くの機能を提供し、モバイルとデスクトップ全体に働く一つのサービスに着目する事によってはるかに優れた体験を作成することができると信じています。

私たちは、あなたのコンテンツにアクセスする簡単な方法を提供します。私たちは、あなたが期待できる変更のいくつかを以下に概説しました。

Picasaウェブアルバム
あなたがPicasaウェブアルバム内の写真やビデオを持っている場合、アクセスするための最も簡単な方法は、Googleフォトにログインすることであり、すべてのあなたの写真や動画がすでに存在することになります。 Googleフォトを使用して、アップロードし、あなたの思い出を整理するだけでなく、あなたのイメージを検索し、共有する事ができます。

しかし、Googleフォトを使用したくない人々のために、私たちは、あなたがあなたのPicasaウェブアルバムにアクセスするための新しい場所を作成します。そうすれば、あなたはまだあなただけの(あなたが今Googleフォトでこれを行うことになる)、作成、整理、編集アルバムすることができなくなり、Picasaウェブアルバムを、ダウンロードを表示、または削除することができます。

明確にするべき事の一つは、今は Picasaウェブアルバムを持っているあなたは、通常のようにそれを使用し続けることができます。(当社は2016年5月1日にこれらの変更をロールアウト開始します)

デスクトップアプリケーション
2016年3月15日の時点で、我々はもはやPicasaデスクトップアプリケーションをサポートすることはありません。すでにこれを利用している人のために動作し続けますが、我々はそれを更に発展させず、将来のアップデートはありません。あなたがGoogleフォトに切り替えることを選択した場合、あなたはphotos.google.com/appsでデスクトップアップローダを使用して写真や動画をアップロードし続けることができます。

最後に、開発者のために、我々はまた、Picasa APIの一部の機能を終了します。

この移行がご迷惑をおかけして申し訳ございませんが、我々は、最高の可能な体験を提供することを目的にこれをやっていることを保証します。 Googleフォトは、私たちは将来的にあなたのための素晴らしい経験と機能を構築するための優れたプラットフォームを提供する新しい製品です。


関連する記事

Picasa が終了するので、Google フォトで登録した画像の URL を Picasa の API で取得する手順

jQuery Columns を使って、Picasa API より アルバム一覧を表示する

Picasa のサムネイルの使い方



タグ:google Picasa
posted by lightbox at 2016-02-25 11:34 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2016年02月19日


Picasa のサムネイルの使い方

Google が、Picasaを終わらせるようですが、以前よりGoogle フォトやGoogle+で同様のURLが使えていました。Google+ はすでにGoogle フォトに切り替わっていますので、今後はGoogle フォトの画像を右クリック等で取得する事になります。

但しこの方法では、Google の公式なものではないので、突然画像が表示出来なくなる可能性は覚悟する必要があります

▼ 古い仕様
画像 URL の基本仕様

1) 保存の画像形式(png、jpg等)はオリジナルの形式で保存される
2) s999 形式のサイズは長辺に適用される
3) s999 を省略すると適当な大きさになる
4) s999 は、実際の大きさを越えても実際の大きさにしかならない
( 実際のサイズは、Chrome ならばタイトルに表示されます )

現在では、s999 の後ろに -Ic42 が付加されていますが、当時に取得した URL は有効のままです(但し今の URL から -Ic42 を省く事はできません )。
また、Google+ では w999-rw-no と h999-rw-no が使えているので、w999-Ic42 と h999-Ic42 も使えます。これは、幅かあるいは高さを優先させてサムネイルを取得できます。但し、w と h を使う方法は公式ではありません。s999-Ic42 も公式のドキュメントはありませんが、Picasa のサービスの一つとして取得できる埋め込み URL 内で使用されているので、余程の仕様変更が無いかぎり使えるものと思います。
※ オリジナルサイズは、右サイドに表示されています ※ URL は、画像の情報から取得します( 顔部分は避けて下さい )
Picasa では、画像をアップロードすると、URL がパラメータとなってその大きい画像内の大きさの画像であれば自由な大きさの画像を供給してくれます。その場合のURL が QueryString ではなく URL そのもので構成されています。

例えば以下は、幅 128px ですが、オリジナル画像のは、1600×1200 なので、s1600 以内であれば自由自在です。
画像表示サンプル
<img src="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s128/b15architecture_exteriors014.jpg" style='border:solid 1px #000000' />

▼ s200


▼ s400


▼ s555


関連する記事

jQuery Columns を使って、Picasa API より アルバム一覧を表示する

Picasa が終了するので、Picasa ブログの英文を解りやすく翻訳して整形しました

Picasa を使った、一枚の画像でサムネイルも兼ねる画像ウインドウの表示コード

コード取得ツール : 誰でも簡単に 画像を使った Shadowbox が使えます



タグ:google
posted by lightbox at 2016-02-19 13:11 | Google | このブログの読者になる | 更新情報をチェックする

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サービス | このブログの読者になる | 更新情報をチェックする

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年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年02月02日


jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

重要

2015/12/1 に検証した結果、解説ページに使用されている jquery.ajax-combobox.js より、GitHub でダウンロードした jquery.ajax-combobox.js のほうが古い事が解りました。古いほうでは、解説ページに書かれている事の半分以上が動作しません。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js をダウンロードする必要があります 
※ UTF-8N です

※ jquery.ajax-combobox.min.js の日付はさらに古いので使え無いものと思われます


最新バージョンに差し替えて、サブ項目のデモを追加しました



ここからは少し前の投稿

デモページ



作者さんの意図では、本来 ajax を使ってサーバー側のデータをリアルタイムに取得する事が目的のようですが、利用するには少し問題が多そうです。サーバー側の解説も無く、クライアント側の解説もそれほど明快なものではありません。

なので、最低限確実に動くサンプルを作成しました。サーバーと連携したい場合は単純に一括で ajax で必要な JSON を取得してから jquery.ajax-combobox に引き渡すといいでしょう。

ダウンロードページ

解説ページ

デモで実行しているコード
	var data = [{"社員コード":"0001","氏名":"浦岡 友也"},{"社員コード":"0002","氏名":"山村 洋代"},{"社員コード":"0003","氏名":"多岡 冬行"},{"社員コード":"0004","氏名":"高田 冬美"},{"社員コード":"0005","氏名":"内高 友之"},{"社員コード":"0006","氏名":"森尾 正也"},{"社員コード":"0007","氏名":"鈴杉 由樹"},{"社員コード":"0008","氏名":"川吉 洋樹"},{"社員コード":"0009","氏名":"村森 友恵"},{"社員コード":"0010","氏名":"杉岡 友一"},{"社員コード":"0011","氏名":"川多 由男"},{"社員コード":"0012","氏名":"杉岡 由樹"},{"社員コード":"0013","氏名":"木川 元男"},{"社員コード":"0014","氏名":"川木 春一"},{"社員コード":"0015","氏名":"中多 克也"},{"社員コード":"0016","氏名":"森村 正恵"},{"社員コード":"0017","氏名":"尾田 雅也"},{"社員コード":"0018","氏名":"松中 輝行"},{"社員コード":"0019","氏名":"野丸 由一"},{"社員コード":"0020","氏名":"松野 友之"},{"社員コード":"0021","氏名":"吉村 春一"},{"社員コード":"0022","氏名":"丸吉 春代"},{"社員コード":"0023","氏名":"松本 洋也"},{"社員コード":"0024","氏名":"尾木 輝男"},{"社員コード":"0025","氏名":"鈴川 春美"},{"社員コード":"0026","氏名":"原中 元美"},{"社員コード":"0027","氏名":"浦村 春一"},{"社員コード":"0028","氏名":"森木 和之"},{"社員コード":"0029","氏名":"多田 友行"},{"社員コード":"0030","氏名":"浦川 冬代"},{"社員コード":"0031","氏名":"岡中 冬之"},{"社員コード":"0032","氏名":"野尾 春男"},{"社員コード":"0033","氏名":"田杉 洋也"},{"社員コード":"0034","氏名":"村高 洋代"},{"社員コード":"0035","氏名":"本原 正也"},{"社員コード":"0036","氏名":"浦多 冬代"},{"社員コード":"0037","氏名":"鈴丸 輝之"},{"社員コード":"0038","氏名":"松高 洋一"},{"社員コード":"0039","氏名":"高松 雅之"},{"社員コード":"0040","氏名":"安村 克恵"},{"社員コード":"0041","氏名":"丸森 雅美"},{"社員コード":"0042","氏名":"中原 冬男"},{"社員コード":"0043","氏名":"原松 春也"},{"社員コード":"0044","氏名":"村松 冬子"},{"社員コード":"0045","氏名":"村松 和子"},{"社員コード":"0046","氏名":"尾内 正樹"},{"社員コード":"0047","氏名":"多松 正樹"},{"社員コード":"0048","氏名":"浦杉 由美"},{"社員コード":"0049","氏名":"原田 春代"},{"社員コード":"0050","氏名":"松丸 正恵"}];

	$('#combo1').css({ "width": "350px" })
	.ajaxComboBox(
		data,
		{
			per_page: 20,
			lang: 'ja',
			button_img: 'ajaxcombobox/dist/btn.png',
			primary_key: '社員コード',
			field: '氏名',
			order_by: [
				'社員コード'
			]
		}
	);
最初に幅を 350px に設定しているのは、これでしか横幅を指定できなかったからです。解説内に幅を狭くするような記述がありますが、コンボボックスそのものでは無いようです。

入力部分は自由に入力が出来、自動的に検索されます。無かった値で送信した場合は、INPUT の name 属性に従って普通に値が送られます。既に存在する値を選んだ場合は、name属性_primary_key にキー部分もセットされます。

入力した値で検索されますが、スペースで区切ると AND 検索になります。オプションで OR 検索に変更する事も可能です

order_by プロパティでは、複数項目が指定可能で、DESC 文字列を使用できます( これについては、解説ページに記述されています )
order_by: [
	'社員コード DESC'
]
キーアクション 入力部分とボタン部分でリストが開いて無い時に下矢印キーを使うとリストが開き、開いている時は、ESC や TAB で閉じます また、開いている時には左右の矢印キーで1ページづつ移動でき、SHIFT+矢印キー で、先頭・最後に移動可能です。 関連する記事 jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
posted by lightbox at 2016-02-02 16:15 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造

このプラグインはとても便利です。先週、実際のシステムに実装しましたが、コードと名前と両方で検索したいという要望に合わせて改造しました。

デモページ


オリジナルの説明ではできるような事が書かれていますが、それば付属のデーターベースアクセスを行う PHP を使う必要があるようで、JSON データをクライアントのデータとして持たせて使う場合には動作しませんでした。

▼ jquery.ajax-combobox 利用時の概要

jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

このプラグインは、何故か GitHub のコードが古い為、そこからダウンロードしたものは殆どうまく動作せず、解説ページ内で使用している以下の URL からダウンロードする必要があります。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js

さらに、内部に直接日本語が書かれている為、UTF-8 以外のクライアント環境で使用する場合は、SCRIPT 要素に charset 属性を記述する必要があります( charset="utf-8" )

改造場所

1445 行あたりに、『連想配列に対して検索する』とあります。ここの以下の条件が検索している場所です
if (self.option.source[i][self.option.field].match(arr_reg[j])) {
self.option.field は、オプションで指定した field の内容を検索している事を示します。ですから、if の中の条件をコピーして || で繋げて、片方を固定で好きなフィールド名に変更すると正しく動作します

▼ こんな感じです
if (self.option.source[i][self.option.field].match(arr_reg[j])||self.option.source[i]["検索したいフィールド名"].match(arr_reg[j])) {





posted by lightbox at 2016-02-02 16:14 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2016年02月01日


A 要素と CSS だけでボタンを表現する 『BUTTONS』

ボタンそのものの下に浮いたような影が付いているのは、このブログ用の CSS で行っています
影の付かないノーマルの表示サンプルはこちらから


BUTTONS


ダウンロードして実装するのもいいですが、基本 CSS は、CDNJS でホスティングされています。

❶ https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css
( link 要素で参照するだけです )

※ ここでは SPAN 要素に対して設定しているのでリンクではありません( 強調として )
※ こんな感じです class="button button-primary"

BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』 では、アイコン用にフリーフォント用の CSS が必要でしたが、A 要素のみで使用する場は必要ありません。テキストとして使用できるものは全て利用可能です

❷ 基本は、class 属性の値として button を指定します
 ( ありがちな値なので競合に注意して下さい )

❸ 次にサイズ用の値
 ( button-tiny / button-small / button-large / button-jumbo / button-giant )
※ 省略すると標準の大きさ

❹ 次に色
 ( button-primary / button-action / button-highlight / button-caution / button-royal )
※ 省略すると灰色
button-inverse で黒を指定できます

になります。ここまででも通常状態で作成されますが、さらに形状を指定できます

❺ button-rounded / button-pill / button-3d / button-raised / button-longshadow-right / button-glow

button-rounded で角丸

button-pill で錠剤形状

button-3d で立体形状

button-longshadow-right で文字の影
( 色によっては、影が出なかったり見えにくかったりします )
button-longshadow-left( 左向きの影 )もあります

button-glow で全体が点滅

▼ class="button button-3d button-border"
さらに、button-border と組み合わせて白抜きの表現が可能になっています

button button-glow button-border

▼ 以下の二つの組み合わせは使えませんね
button button-raised button-border
( button button-raised button-border )

button button-longshadow-right button-border
( button button-longshadow-right button-border )

基本形状の組み合わせも可能です


サイズ : button-tiny

Go Go Go


サイズ : button-small / 色 : button-primary

Go Go Go

サイズ : 指定なし / 色 : button-action

Go Go Go

サイズ : button-large / 色 : button-highlight

Go Go Go

サイズ : button-jumbo / 色 : button-caution

Go Go Go

サイズ : button-giant / 色 : button-royal

Go Go Go

表現方法 : button-3d

日本語でもOKですが

button クラスの font-family を

上書きしないと

想定したフォントになりません

表現方法 : button-raised

ようこそ! Go こんにちは!

黒は button-inverse

表現方法 : button-longshadow-right

普通の文字でも 影は 使えます


表現方法 : button-glow

Go Go Go Go


表現方法 : button-3d と button-border

OK

br 要素で改行する場合は
heightとline-height指定が必要です


表現方法 : button-glow と button-border

OK

br 要素で改行する場合は
heightとline-height指定が必要です


<style>
.button {
	font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif!important;
}
</style>

<link id="link" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">

<div id="buttons_a">
<br><br><b class="gttl">サイズ : button-tiny</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-rounded button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-pill button-tiny">Go</a>

<br><br><b class="gttl">サイズ : button-small / 色 : button-primary</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-rounded button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-pill button-small">Go</a>

<br><br><b class="gttl">サイズ : 指定なし / 色 : button-action</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-action">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-rounded">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-pill">Go</a>

<br><br><b class="gttl">サイズ : button-large / 色 : button-highlight</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-rounded button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-pill button-large">Go</a>

<br><br><b class="gttl">サイズ : button-jumbo / 色 : button-caution</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-rounded button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-pill button-jumbo">Go</a>

<br><br><b class="gttl">サイズ : button-giant / 色 : button-royal</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-rounded button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-pill button-giant">Go</a>

<br><br><b class="gttl">表現方法 : button-3d</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-primary button-rounded">日本語でもOKですが</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-action button-pill">button クラスの font-family を</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-caution">上書きしないと</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-royal">想定したフォントになりません</a>

<br><br><b class="gttl">表現方法 : button-raised</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill">ようこそ!</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal">こんにちは!</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-pill button-inverse">黒は button-inverse</a>
  
<br><br><b class="gttl">表現方法 : button-longshadow-right</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill button-longshadow-right">普通の文字でも</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution button-longshadow-right">影は</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal button-longshadow-right">使えます</a>
<br>
<a href="http://matome.naver.jp/odai/2131896140848768101" class="button button-raised button-pill button-inverse button-longshadow-right"><span style="font-size:30px;">&#9822;</span></a>

<br><br><b class="gttl">表現方法 : button-glow</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-raised button-primary">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-highlight">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-royal">Go</a>
  
<br><br><b class="gttl">表現方法 : button-3d と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-caution button-rounded" style="height:80px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>

<br><br><b class="gttl">表現方法 : button-glow と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-caution button-rounded" style="height:84px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>



</div>



タグ:CSS
posted by lightbox at 2016-02-01 14:34 | Comment(0) | HTML / CSS | このブログの読者になる | 更新情報をチェックする
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 終わり