SQLの窓

2016年06月14日


Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました

簡単にグラフが作成できるのですが、なんか本当に人気が無いように思います。

Quick Start

先に DataTable を作っていろいろ UI や グラフ のタイプを変えるのですが、やはり、使い勝手のいい 円グラフが Quick Start で紹介されています。

そのサンプルはそれとして、以前より使用しているサンプルにフォント設定を追加したのが以下になります。

fontName や fontSize をはじめとするオプションのリファレンスはこちらです。

ソースコード
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

<script type="text/javascript">

function drawChart() {

	var data = new google.visualization.DataTable();
	data.addColumn('string', '対象');
	data.addColumn('number', '件数');
	data.addRows(3);

	data.setValue(0, 0, '対象A');
	data.setValue(0, 1, 2000);
	data.setValue(1, 0, '対象B');
	data.setValue(1, 1, 3000);
	data.setValue(2, 0, '対象C');
	data.setValue(2, 1, 1500);

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(
		data, {
			fontSize: 16,
			fontName: 'Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif',
			width: 400,
			height: 300,
			is3D: true,
			title: '円グラフのタイトル'
		}
	);

}

</script>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
</script>

昔は google.load ってのを使ってました。ライブラリも apikey 付きで、www.google.com/jsapi です。(今でも動きます)
key が無いとこんな文句言われてました
Warning: You need your own API key in order to use the Google Loader.  Without your own key, examples won't work. 
・・・・とは言うものの6年前の話です。そもそも、日本語で書かれた新しい情報が皆無なので apikey に関する流れは確認できません。いらないんだから、どっちでもいいですけれど、Google と長く付き合うと良くある事ではあります。
タグ:google
posted by lightbox at 2016-06-14 20:26 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2016年06月12日


pChart2 に JKゴシックとラノベポップを使ってサンプルを作りました



良く使われると想定される、折れ線グラフの最もシンプルなサンプルで各実行単位の解説をコメントで付加しています。
(ソースコードは UTF-8N)
<?php

// *************************************
// ライブラリの読み込み
// *************************************
require_once("../pchart/class/pData.class.php");
require_once("../pchart/class/pDraw.class.php");
require_once("../pchart/class/pImage.class.php");

$main_font = "./JKG-L_3.ttf";
$ttl_font = "./lightnovelpop.ttf";

$w = 600;
$h = 250;

// *************************************
// データ作成
// *************************************
$MyData = new pData();

// *************************************
// 座標設定
// ※ 最後の文字列は凡例用
// *************************************
$MyData->addPoints(array(-4,VOID,VOID,12,8,3),"凡例 壱");
$MyData->addPoints(array(3,12,15,8,5,-5),"凡例 弐");
$MyData->addPoints(array(2,7,5,18,19,22),"凡例 参");

// *************************************
// X 座標の表示内容
// *************************************
$MyData->addPoints(array("1月","2月","3月","4月","5月","6月"),"横軸の月");
// 後から設定する
$MyData->setAbscissa("横軸の月");	// 表示名

// *************************************
// ライン設定
// *************************************
$MyData->setSerieTicks("凡例 弐",4);	// 間隔 4 の点線
$MyData->setSerieWeight("凡例 参",2);	// 線幅

// デフォルトは 0
$MyData->setAxisName(0,"縦軸1");


// *************************************
// 画像のサイズ指定
// *************************************
$myPicture = new pImage($w,$h,$MyData);

// *************************************
// 画像の枠線指定
// *************************************
$myPicture->drawRectangle(0,0,$w-1,$h-1,array("R"=>0,"G"=>0,"B"=>0));

// アンチエイリアス
$myPicture->Antialias = TRUE;
 
// *************************************
// 使用するフォント
// *************************************
$myPicture->setFontProperties(array("FontName"=>$ttl_font,"FontSize"=>12));
// *************************************
// タイトル
// drawText($X,$Y,$Text,$Format="")
// *************************************
$myPicture->drawText(10,35,"ラノベポップは太めです",array("FontSize"=>20,"Align"=>TEXT_ALIGN_BOTTOMLEFT));

// *************************************
// 使用するフォント
// *************************************
$myPicture->setFontProperties(array("FontName"=>$main_font,"FontSize"=>12));

// *************************************
// グラフエリアの定義
// setGraphArea($X1,$Y1,$X2,$Y2)
// *************************************
 $myPicture->setGraphArea(60,40,$w-70,$h-50);

// *************************************
// スケールの設定
// *************************************
$scaleSettings = 
	array(
		"XMargin"=>10,
		"YMargin"=>10,
		"Floating"=>TRUE,			// 座標外(マージン)をクリア
		"GridR"=>100,"GridG"=>100,"GridB"=>100,	// グリッド線の色
		"DrawSubTicks"=>TRUE,		// 目盛の中心に目盛
		"CycleBackground"=>TRUE		// 交互に色を付ける
	);

// *************************************
// スケールの描画
// *************************************
$myPicture->drawScale($scaleSettings);

// *************************************
// グラフの描画
// *************************************
$myPicture->drawLineChart();

// *************************************
// 凡例の描画
// drawLegend($X,$Y,$Format="")
// *************************************
$myPicture->drawLegend(350,20,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));

// *************************************
// 表示
// *************************************
$myPicture->stroke();
?>

ちなみに、画像として img 要素に記述する場合は、php の最後に ? を付けておくと、右クリックで画像保存する際に .png として名前付けされました( Google Chrome で確認 )


posted by lightbox at 2016-06-12 22:10 | PHP + 特記事項 | このブログの読者になる | 更新情報をチェックする

2016年06月11日


Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ

デモページ


画像ひとつぶんの記述
<a href='575be6f335da1_artwork_image_8667.jpg' data-lightbox='gallery' data-title='<input type="button" value="選択" onclick="select_img(this)" data-src="575be6f335da1_artwork_image_8667.jpg">'><img src='s/575be6f335da1_artwork_image_8667.jpg'></a>
lightbox2 は、v2.8.2 です。なので、ライブラリの読み込みは ページの最後です。

data-title にボタンの HTML をセットして、onclick イベントで select_img 関数を呼び出し、ボタンのインスタンスを引数で渡します。

ボタンには、data-src 属性を追加して、画像ファイル名をセットしていますので、select_img 関数 でこの値を取り出します。

select_img 関数
function select_img(data) {

	var src = $(data).data("src");

	alert( src );

	$(".lb-close").trigger("click");

}


Lightbox2 をどうやって閉じようかと、普通に試したら $(".lb-close").trigger("click") で閉じる事ができました。jQuery で普通にイベント登録している事が推測されますね。

関連する記事

Lightbox2 ライブラリの今時の使い方

▼ Lightbox2 の必要なファイル


※ .css の中の画像のパスは画像ファイル名のみになっています



posted by lightbox at 2016-06-11 20:06 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2016年06月10日


とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル

2016/06/10
jQuery プラグインを作成しました
2016/06/07
ベージに横スクロールバーが出ている場合や、小さなコンテンツで、ブラウザが大きく開いている場合に対応すると、load と resize イベントで的確な設定をする必要がありました。

Stack Overflow でとてもいいサンプルがあったのでご紹介します、ただ、サンプルでは汎用性に欠けるので、どこでも使えるように改造しました。

対象コントロールをクリックすると、コントロール以外が暗転します
対象コントロールにクラスを設定し、そのクラスは position:relative; にしておきます。後は、overlay 用の div の作成と、jQuery のイベント登録です。
div は css で大きさを明示する必要があります





このブログの都合で div幅はインラインで指定しています



オリジナルからの改造の最も重要な点は、暗転用の div を、jQuery で BODY に追加して高さを動的に設定して使用してるところです。これは、ブログ等の複雑な HTML 構造の場合に有効だと思います。単純なページならば、オリジナルと同じように height:100% で良いかと思います
<style>
.example {
	background:#fff;
	border:1px solid pink;
	cursor:pointer;
	margin:5px; padding:20px;
	height:100px;
}
.expose {
	position:relative;
}

#overlay {
	background:rgba(0,0,0,0.3);
	display:none;
	position:absolute; top:0; left:0; z-index:99998;
}
</style>
<div
	class="expose example"
	 style="width:300px!important;">div は css で大きさを明示する必要があります</div>
<br>
<textarea
	class="expose" style="width:300px;height:100px;">入力できます</textarea><br>

<br>
<input
	type="text"
	class="expose"
	value="入力できます"
	style="width:300px;"><br>
<br>
<div
	class="expose example"
	style="width:300px!important;">このブログの都合で div幅はインラインで指定しています</div>
<br><br>

<script>
$(function(){
	$( '<div id="overlay"></div>' ).appendTo( 'body' );

	$('.expose').click(function(e){
		$(this).css('z-index','99999');
		$('#overlay').fadeIn(300);
	});

	$('#overlay').click(function(e){
		$('#overlay').fadeOut(300, function(){
			$('.expose').css('z-index','1');
		});
	});

	$(window).on("load resize", function(){
		if ( document.documentElement.clientWidth < Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) ) {
			$('#overlay').css("width", Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) +'px');
		}
		else {
			$('#overlay').css("width", "100%");
		}
		if ( document.documentElement.clientHeight < Math.max(document.documentElement.scrollHeight,document.body.scrollHeight) ) {
			$('#overlay').css("height", Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+'px');
		}
		else {
			$('#overlay').css("height", "100%");
		}
		
	});
});
</script>



posted by lightbox at 2016-06-10 22:55 | jQuery | このブログの読者になる | 更新情報をチェックする

2016年06月06日


javamail-android + AsyncTask でメール送信を行う為のテンプレート

ソースのみのダウンロード


Gmail を使用する場合は、安全性の低いアプリの許可を『有効』にする 必要があります。

Gmail のサーバ : smtp.gmail.com
▼ 以下参考
Yahoo メールのサーバ : smtp.mail.yahoo.co.jp
Microsoft のサーバ : smtp.live.com

※ AndroidManifest.xml で、インターネットアクセスの許可が必要です。

▼ 実行画面



▼ javamail-android ライブラリ

ダウンロード
libs フォルダに 3つとも ダウンロードして、mail.jar のみ 右クリックから Add as Library で登録します

▼ AndroidSendmail クラス
package lightbox.june.mailpost;

import android.os.AsyncTask;

import java.util.Properties;

import javax.mail.Authenticator;
import javax.mail.Message;
import javax.mail.PasswordAuthentication;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import javax.mail.internet.MimeUtility;

/**
 * Created by lightbox on 2016/06/06.
 */
public class AndroidSendmail {

	// AsyncTask のインラインで参照する為の final
	private final String server;
	private final String port;
	private final String userid;
	private final String password;
	private final String username;

	// ************************************
	// コンストラクタ
	// ************************************
	public AndroidSendmail(
		String server,
		String port,
		String userid,
		String password,
		String username) {

		this.server = server;
		this.port = port;
		this.userid = userid;
		this.password = password;
		this.username = username;

//		Log.i("lightbox","コンストラクタ");
//		Log.i("lightbox",server);
//		Log.i("lightbox",port);
//		Log.i("lightbox",userid);
	}

	// ************************************
	// AsyncTask の onPostExecute から外部イベントとして
	// 呼び出す為のインターフェイス
	// ************************************
	public interface SendMailed {
		public void onMailResult(String result);
	}

	// ************************************
	// メール送信
	// ************************************
	public void SendMail(String to, String from, String subject, String body,final SendMailed sm) {

		new AsyncTask<String, Void, String>() {

			// ************************************
			// 非同期処理
			// ************************************
			@Override
			protected String doInBackground(String... params) {

//				Log.i("lightbox","開始");

				String result_string = "";
				try {
					// ************************************
					// プロパティオブジェクトを作成
					// プロパティオブジェクトは、extends Hashtable(連想配列)
					// ************************************
					Properties props = new Properties();

					// ************************************
					// * 連想配列に送信用サーバのアドレスをセット
					// ************************************
//					props.put("mail.smtp.host","smtp.mail.yahoo.co.jp");	// Yahoo
//					props.put("mail.smtp.host","smtp.live.com");	// Microsoft
					props.put("mail.smtp.host", server);
					props.put("mail.smtp.port", port);
					props.put("mail.smtp.auth", "true" );	// SMTP 認証を行う

					// ************************************
					// SSL関連設定
					// ************************************
					if ( port.equals("465") ) {
						props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
						props.put("mail.smtp.socketFactory.fallback", "false");
						props.put("mail.smtp.socketFactory.port", port);
					}

					// ************************************
					// 暗号化
					// ************************************
					if ( port.equals("587") ) {
						props.put("mail.smtp.starttls.enable", "true");
					}


					// ************************************
					// メール用のセッションを作成
					// ************************************
					SimpleAuthenticator sa =
						new SimpleAuthenticator(userid, password);
					Session MailSession =
						Session.getInstance( props, sa );

					// ************************************
					// メール用のメッセージオブジェクトを作成
					// ************************************
					MimeMessage msg = new MimeMessage(MailSession);

					// ************************************
					// 宛先
					// ( 第一引数では、CC や BCC を指定できます。)
					// ( 第二引数は、配列も使えます / その場合は、setFrom に準じます )
					// ************************************
					msg.setRecipients(
						Message.RecipientType.TO,
						params[0]
					);

					// ************************************
					// 送信者
					// ************************************
					msg.setFrom(
						new InternetAddress( params[1], username, "ISO-2022-JP" )
					);

					// ************************************
					// 件名
					// ************************************
					msg.setSubject(
						MimeUtility.encodeText(
							params[2],
							"iso-2022-jp",
							"B"
						)
					);

					// ************************************
					// 本文
					// ************************************
					msg.setContent(
						params[3],
						"text/plain; charset=\"iso-2022-jp\""
					);

					// ************************************
					// 送信
					// ************************************
					Transport.send( msg );

					result_string = "メールの送信を完了しました";

				}
				catch( Exception e ) {
					e.printStackTrace();
					result_string = "メールの送信に失敗しました";
				}

//				Log.i("lightbox","終了");

				return result_string;
			}

			// ************************************
			// 非同期処理終了後の処理( 画面へのアクセスが可能 )
			// ************************************
			@Override
			protected void onPostExecute(String result) {
				// 引数のインターフェイス内のメソッドを呼び出す
				sm.onMailResult(result);
			}

		}.execute(to, from, subject, body);

	}

	// ************************************
	// 認証用のプライベートクラス
	// ************************************
	private class SimpleAuthenticator extends Authenticator {

		private String user_string = null;
		private String pass_string = null;

		public SimpleAuthenticator( String user_s, String pass_s ) {
			super();
			user_string = user_s;
			pass_string = pass_s;
		}

		protected PasswordAuthentication getPasswordAuthentication(){
			return new PasswordAuthentication( this.user_string, this.pass_string );
		}
	}
}

通常の Javamail と仕様は同じ(のよう)です。

ポートの 465(SSL) を使うか 587(TSL) を使うかで設定するプロパティが変わって来ます。テストは、Yahoo メールとHotmailで行いましたが、それぞれ 465 と 587 です。Gmail は両方可能だと思います。

Hotmail は、Outlook エイリアスという呼び名で名前を追加できますが、その名前を使用する事ができました( メールヘッダはオリジナルに戻ってました )

※ 『メール アカウント』受信トレイ>オプション>メール アカウント

呼び出し
package lightbox.june.mailpost;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		MainActivity.this.findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {

				EditText passText = (EditText)MainActivity.this.findViewById(R.id.passText);
				String pass = passText.getText().toString();

				AndroidSendmail as = new AndroidSendmail(
					"smtp.gmail.com", // サーバ( 例 : "smtp.mail.yahoo.co.jp" or "smtp.live.com" )
					"465", // 465 または 587
					"", // アカウント
					pass, // パスワード
					"日本語ユーザ名"
				);

				// 宛先
				EditText to = (EditText)MainActivity.this.findViewById(R.id.editText2);
				String atesaki = to.getText().toString();

				// from の メールアドレス
				String myAddress = "";

				// 件名
				EditText subject = (EditText)MainActivity.this.findViewById(R.id.editText3);
				String kenmei = subject.getText().toString();

				// 本文
				EditText body = (EditText)MainActivity.this.findViewById(R.id.editText1);
				String honbun = body.getText().toString();

				as.SendMail(
					atesaki,
					myAddress,
					kenmei,
					honbun,
					new AndroidSendmail.SendMailed() {
						@Override
						public void onMailResult(String result) {
							Log.i("lightbox", result);
						}
					}
				);


			}
		});

	}
}


画面定義

エミュレータ上でパスワードを入れる事を想定して、入力時にパスが解らないように android:textColor="#efefef" となっています。

枠線は、drawable に border.xml を定義して android:background="@drawable/border" と指定しています
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="lightbox.june.mailpost.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="送信" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="2dp"
        android:background="@drawable/border"
        android:ems="10"
        android:gravity="top|left"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:inputType="textMultiLine">

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_below="@+id/button1"
        android:layout_marginTop="15dp"
        android:background="@drawable/border"
        android:paddingLeft="10dp"
        android:text="メール送信"
        android:textSize="30sp" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="2dp"
        android:background="@drawable/border"
        android:ems="10"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:layout_alignEnd="@+id/editText1"
        android:layout_toRightOf="@+id/textView2"
        android:layout_marginLeft="18dp"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="宛先"
        android:textSize="20sp"
        android:layout_below="@+id/editText1"
        android:gravity="center_vertical"
        android:layout_alignBottom="@+id/editText2"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:text="件名"
        android:textSize="20sp"
        android:layout_alignEnd="@+id/textView2"
        android:layout_marginTop="2dp"/>

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView3"
        android:background="@drawable/border"
        android:ems="10"
        android:textSize="20sp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:layout_alignEnd="@+id/editText2"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="パス"
        android:id="@+id/textView"
        android:layout_below="@+id/editText3"
        android:textSize="20dp"
        android:layout_marginTop="2dp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/passText"
        android:background="@drawable/border"
        android:padding="10dp"
        android:layout_below="@+id/textView"
        android:textColor="#efefef"/>

</RelativeLayout>


border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <corners
        android:radius="4dp" />

    <stroke
        android:width="1dp"
        android:color="@android:color/black" />

</shape>

関連する記事

VS2010(C#) : TKMP.DLL(3.1.2)を使った、メール送信テンプレート
javamail 1.4.4 でメール送信




posted by lightbox at 2016-06-06 14:54 | Android Studio 2 | このブログの読者になる | 更新情報をチェックする

2016年06月04日


CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味





▲ ハンバーガーアイコンは、メニューに使われるアイコンで3本の横線の形状から『ハンバーガー』と呼ぶようですが、このアイコンをクリックすると真ん中の棒が左へ消えて、上下の棒が回転して『閉じる』アイコンへとアニメーションします
<div id="test_box">
ハンバーガアイコン 
<a id="hamburger">
	<span class="top-bar"></span>
	<span class="middle-bar"></span>
	<span class="bottom-bar"></span>
</a>
</div>

アニメーションの発動

これに関してのみ jQuery のイベント処理を使っていますが、アニメーションに関しては全て CSS で定義されています。jQuery(JavaScript) で行う処理は、『h-opened』というクラスを #hamburger の親に設定するだけです。また、既に 『h-opened』が設定済みの場合はクラスを削除します。このスイッチのみの作成に jQuery(JavaScript) を使用しています

アニメーションの開始

アニメーションの最終状態は CSS で定義されています。以下の定義がアニメーションした結果、どうなるかという部分です。
#test_box.h-opened #hamburger span.top-bar {
	transform: rotate( 45deg );
	top: 8px;
}
#test_box.h-opened #hamburger span.middle-bar {
	opacity: 0;
	left: -40px;
}
#test_box.h-opened #hamburger span.bottom-bar {
	transform: rotate( -45deg );
	top: -8px;
}
#test_boxh-opened が追加された事をブラウザが検知するとアニメーションが開始され、h-opened が無くなった事を検知すると元へ戻ろうとします。元の状態はアニメーションに関する設定を行う以下の中に定義されています。
#hamburger span {
	/* span の基本属性 */
	background: #999;
	/* div は他で使うかもしれないので、span を利用して block 化 */
	display: block;
	/* 棒の太さ */
	height: 3px;
	/* 3本の棒の位置関係 */
	margin: 5px 0 5px 0;
	/* 位置指定可能 */
	position: relative;

	/* 変化するプロパティの初期値 */
	transform: rotate( 0 );
	top: 0;
	left: 0;
	opacity: 1;

	/* 変化するプロパティ */
	transition-property: transform, top, left, opacity;
	/* 変化に要する時間 */
	transition-duration: 0.5s;
}
  • 1) 最初にアニメーションする span 要素の形状を定義しています。
  • 2) 次に、アニメーションする前の初期状態を決定しています。この状態からアニメーション後の状態へと少しづつ変化させて動くわけです
  • 3) 最後に、アニメーションする対象となる transition-property を列挙して、変化に要する時間を定義しています
#hamburger は a 要素ですが、アイコンにする為に display:inline-block となっています。また、真ん中の棒を枠内で消すために overflow:hidden; が定義されています。 a 要素を使う必要は無いのですが、元々 mmenu で解説されていたアイコンなので a 要素を使うと簡単にメニューと連動ができています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
	$("#hamburger").on( "click", function(){
		if ( $("#test_box").hasClass("h-opened") ) {
			$("#test_box").removeClass("h-opened");
		}
		else {
			$("#test_box").addClass("h-opened");
		}
	} );
});
</script>
<style>
/* 枠 */
#hamburger {
	/* アニメーションで真ん中の棒を隠す為 */
	overflow: hidden;
	border: 1px solid #999;
	/* 行中で使用する為 */
	display: inline-block;
	/* 行中内の幅は必要 */
	width: 30px;
	/* ハンバーガアイコンの内部余白 */
	padding: 4px 8px 4px 8px;
	/* クリック可能カーソル */
	cursor: pointer;
}
#hamburger span {
	/* span の基本属性 */
	background: #999;
	/* div は他で使うかもしれないので、span を利用して block 化 */
	display: block;
	/* 棒の太さ */
	height: 3px;
	/* 3本の棒の位置関係 */
	margin: 5px 0 5px 0;
	/* 位置指定可能 */
	position: relative;

	/* 変化するプロパティの初期値 */
	transform: rotate( 0 );
	top: 0;
	left: 0;
	opacity: 1;

	/* 変化するプロパティ */
	transition-property: transform, top, left, opacity;
	/* 変化に要する時間 */
	transition-duration: 0.5s;
}

#test_box.h-opened #hamburger span.top-bar {
	transform: rotate( 45deg );
	top: 8px;
}
#test_box.h-opened #hamburger span.middle-bar {
	opacity: 0;
	left: -40px;
}
#test_box.h-opened #hamburger span.bottom-bar {
	transform: rotate( -45deg );
	top: -8px;
}


</style>
<div id="test_box">
ハンバーガアイコン 
<a id="hamburger">
	<span class="top-bar"></span>
	<span class="middle-bar"></span>
	<span class="bottom-bar"></span>
</a>
</div>


タグ:CSS jquery
posted by lightbox at 2016-06-04 16:11 | CSS3 | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり