Android8 画面のダブルタップでロック/解除が出来るようにする設定方法

自分の持っている「Zenfone MAX(M2) ZB633KL Android8」で電源ボタンを使用せず、画面のダブルタップで、画面の「ロック/解除」を出来るように設定する方法

「設定」→「システム」→「拡張機能」→「ZenMotion」とタップして

「スクリーンオフ(ダブルタップでスリープモード)」をオン

「スクリーンオン(ダブルタップでスリープモード解除)」をオン

に設定する。

 

自分で設定しておきながら、設定方法が分からなくなったので備忘録。

スマホサイト用トグルボタン自作メモ

javascriptが心底苦手で、今まではスマホサイト用のトグルボタンは出来合いのものを流用して、後からカスタマイズ等するときに手出しできなかったりしてたりしたが、ようやく自作してそれらしいものが出来るようになったので、近い将来に改修する際に「???・・・」となっているであろう自分への覚書。

HTML部分

<p><a href="#link" id="toggle01">メニュー表示</a></p>
<div class="menu01">
<ul>
 <li>menu01</li>
 <li>menu02</li>
 <li>menu03</li>
 <li>menu04</li>
</ul>
<p><a href="#link" id="close01">閉じる</a></p>
</div>
<p>これはサンプルテキストです</p>/* Your code... */

何の変哲もないメニュー用の「ul」と「li」

これをjavascriptで表示したり、隠したりする。実際に表示、非表示にするのは「div class="menu01"」のボックス部分

CSS部分

.menu01 ul {
}
.menu01 ul {
	width: 300px;
	height: 300px;
	margin: 0px;
	padding: 0px;
	background: #00F;
}
.menu01 ul li {
	background: #F00;
	padding: 20px;
	margin: 0px 0px 2px;
}

こちらも何の変哲もないCSSコード

一つだけ注意点として「ul」(表示・非表示するボックス)の高さを指定しないとギクシャクした動きになる

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(function(){
	$(".menu01").toggle();
	$("#toggle01").click(function(){
		$(".menu01").slideToggle();
	});
	$("#close01").click(function(){
		$(".menu01").slideUp();
	});
});
</script>

1行目はjQueryのおまじない

4行目は「div class=”menu01″」の初期設定を非表示にするおまじない

5-7行目は「<a id=”toggle01″ href=”#link”>メニュー表示</a>」が
クリックされたときにスライドして表示させる設定
再度クリックするとスライドして非表示になる

8-10行目は「<a id=”close01″ href=”#link”>閉じる</a>」が
クリックされたときに「div class=”menu01″」を
スライドして非表示にする設定。閉じるのみ

デモ

デモ表示

あとは「メニュー表示」のリンク部分を「トグルボタン」の画像にする

CSSの「position: absolute;」等を使ってボタンの位置調整、コンテンツの上に重なるように表示する等の処理を必要に応じて加える

参考サイト

jQuery 要素を表示/非表示にする(toggle)

jQuery UI datepickerのダウンロード、設置、日本語化

ダウンロード

ダウンロードが英語サイトの上、結構ややこしく、どこのサイトを見てもなかなかピンとくるものがなく苦労した。下記サイトが一番わかりやすいと思います。

https://jqueryui.com/

画像のように「Stable」をクリックすると設置に必要なファイル群一式がダウンロードできます。

設置

CSS

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.structure.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.theme.css" rel="stylesheet" type="text/css">

Javascript

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script>
$(function(){
  $(".datepicker").datepicker();
});
</script>

最初の「.datepicker」がHTMLのクラスを指定しているので、HTML側で「class=”datepicker”」を指定。

HTML


<form action="" method="get">
<input type="text" class="datepicker" name="希望日" value="" placeholder="クリックして日付を入力"></input>
</form>

先程のJavascriptで設定された「class=”datepicker”」を指定。

↓ひとまずカレンダー表示

日本語化

ちょっとだけややこしいけど、これが一番確実な方法。

https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js

上記サイトにアクセスして、右側にある「Raw」ボタンをクリックするとテキストが表示されるので、全て選択して「datepicker-ja.js」として保存する。

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ja = {
	closeText: "閉じる",
	prevText: "&#x3C;前",
	nextText: "次&#x3E;",
	currentText: "今日",
	monthNames: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	monthNamesShort: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
	dayNamesShort: [ "日","月","火","水","木","金","土" ],
	dayNamesMin: [ "日","月","火","水","木","金","土" ],
	weekHeader: "週",
	dateFormat: "yy/mm/dd",
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: "年" };
datepicker.setDefaults( datepicker.regional.ja );

return datepicker.regional.ja;

} ) );

上記からもダブルクリックで全て選択、コピペ可能。

保存したファイルをHTMLへ設置

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

↓ここに追記
<script type="text/javascript" src="js/datepicker-ja.js"></script>

<script>
$(function(){
  $(".datepicker").datepicker();
});
</script>

↓日本語化後

もうちょっとカスタマイズ

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ja = {
	closeText: "閉じる",
	prevText: "&#x3C;前",
	nextText: "次&#x3E;",
	currentText: "今日",
	monthNames: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	monthNamesShort: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
	dayNamesShort: [ "日","月","火","水","木","金","土" ],
	dayNamesMin: [ "日","月","火","水","木","金","土" ],
	weekHeader: "週",
	dateFormat: "yy/mm/dd",
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: "年",
	showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
 };
datepicker.setDefaults( datepicker.regional.ja );

return datepicker.regional.ja;

} ) );

33行目の「”今日”ボタン, “閉じる”ボタンを表示する」のオプションを追加。

↓完成図

WordPress 5.0.1 と Twenty Nineteen にしてみた

WordPress 5.0.1

WordPress 5.0.1

まず、WordPress 5.0.1 はエディタが新しい「Gutenberg(グーテンベルク)」になり、今までのものとは似ても似つかないエディタになっていて、慣れるまでかなり時間がかかりそう。更に一部がきちんと日本語に翻訳されていない部分があり、次のアプデでここら辺がちゃんと翻訳されるまで少し様子を見た方がいい感じ。

Twenty Nineteen

Twenty Nineteen

新しいテーマの「Twenty Nineteen」もこれまた斬新すぎるというか、サイドバーがない!うーん・・・どうなんだろう・・・となってしまうが、確かにスマホの時代だから、スマホ表示を第一に考えるのは自然の流れなんだろうけど、PC表示のときに、ちょっとちょっとのような気がするのは自分だけだろうか・・・?

あとは時間と共に慣れていくしかないんだろうなぁ・・・。

CentOS7 yum update が遅いときのチェックポイント

「yum update」をしていると、ものすごく遅いサーバーにあたってしまい、トロトロと中々進まず、下手をするとアップデートに失敗したりします。

大方の予想通り、わざわざ海外の遥か彼方のサーバーにアクセスしにいったりしているので、日本のサーバーにアクセスするようにする設定の覚書。

# vi /etc/yum/pluginconf.d/fastestmirror.conf

include_only=.jp ←追記

保存して、終了後、yum updateのキャッシュをクリアして、実行。

# yum clean all
# yum update

日本のサーバーにアクセスしているか?を確認する。