ホーム » ブログ

画面スクロールによりある要素を画面表示に入ってきたら、あるイベントを引き起こせるニーズがあるかもしれない。
例えて言うと、画面ファストビューに入ってない画像やコンテンツなどを非同期に表示すれば、ユーザに快適的にページを閲覧ができます。
従来では独自のJS方法を各々に作成して、画面スクロールを計算し、監視対象がモニタに入ってきたら非同期でコンテンツを取得して表示できますが、
画面スクロールは頻繁に起こして、ブラウザの重くなる原因になります。
近年になって新しく導入されたIntersectionObserverを使えば、パフォーマンスへの影響を気にすることなく、要素の交差判定を簡単に実装することができます。…

続く...

当記事はjqueryのajax非同期でコンテンツを取得して画面に表示の方法です。
既に検証済みのコードを貼り付けるので、ぜひご活用ください。

下記の例では、非同期でページのQRコード画像を独自のWEBAPIから取得し、id=page-qrcode-imgのタグに表示する。
もちろん、該当方法も後ほど筆者運営しているbenri.jpサイトに適用する予定です。


$.fn.getPageQrcode = function (pageUrl,pageKey) {
  var send_data = {page_url:pageUrl,page_key:pageKey};
  // QRCode作成のWebAPI
  var webApi = "//www.benri.jp/calendar/umiwake";

続く...

オラクルでTRIMを利用するSQLのパフォーマンスが劇的に低い現象が発生しました。開発段階にテーブルのレコード数が少ない時にSQLの重さがかじってませんでしたが、
本番に近いデータを入れた後に検証したら、検索が重くてほぼ動けない状態に落ちってしまった。原因は下記のようなSQLです。



select * from abc_tbl where TRIM(id)=#param_id# and del_flg <> '1';

上記のSQLで、インデックスを入れたけど、TRIMメソッドを利用のため、ORACLEのインデックス機能が利用できなくなって、パフォーマンスが非常に悪くなった

続く...

下記の例で、checkboxをON/OFFに状態変更したら、checkbox所属の親要素divのclass名にActiveクラスを入れる。
MutationObserverメソッドはdivのクラス名に監視し、クラス名の変更がありましたら、最新のクラス名を画面に表示する。
ソースをコピペで検証してね。



<html>
<head>
<script type="text/javascript" src="https://www.benri.jp/js/jquery/jquery-1.9.1.min.js"></script>
<script>

$(function(){
	//監視対象Element
	var target =

続く...


僕が運営している別のサイトで既に実装しましたが、メモ帳としてここでアコーディオン実現する方法を掲載します。
では、いつもの流れで、ソースコードを貼り付けます。コピペでイメージ確認してください。



<style>
.Accordion {
  max-width: 400px;
  border: 1px solid #ccc;
  border-top: none;
}
.Accordion__menu {
  
}

.Accordion__MenuLabel {
  height: 2rem;
  line-height: 1.8;
  font-size: 1.2rem;
  padding: 0.3rem 1rem;
  display: block;
  cursor: pointer;

続く...

昔はJavascriptやJqueryなどを使ってコンテンツを切り替えで表示していました。本日はJSを一切に使わず、CSSのみでコンテンツ切替えで表示・非表示してみます。
当サイトのいつもの流れで、まずはソースコードを貼り付けます。コピペで実機検証してください。


<style>
.TogglePanel__checker {
  display: none;
}
.TogglePanel__label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  background: #0bd;
  color: #FFF;
  -webkit-transition: 0.1s;

続く...

2020東京オリンピックの開催期間は2020年7月24日から8月9日までとなります。
東京オリンピックに向けて、2020年限って7、8月及び10月の祝日が東京五輪の前後に移動されました。
具体的には海の日(7月第3月曜日)を東京五輪の開会式前日の7月23日、体育の日(10月第2月曜日)を開会式の24日、山の日(8月11日)を閉会式翌日の8月10日にそれぞれ移されました。
そして、2020年から10月第2月曜日の体育の日をスポーツの日に改称される。(体育→スポーツはタダの文字遊びゲームでじゃ!いや、そうではない、カレンダー印刷会社や各企業が利用するシステムの改修作業が発生するから、企業に負担かけますが、GDPに貢献します)

2020年祝日移動に伴って、便利ジャパンは早くてもカレンダーの最新化に対応を行いました。…

続く...

 メモ20180926

  • 2018/09/26

メモ20180926


<?php
/** tide.php
 * 潮位・月齢を計算
 *
 * @動作環境	PHP 5/7
 * @参考URL		https://www.pahoo.org/e-soul/webtech/php02/php02-51-01.shtm
*/
// ================================================================初期化処理 
define('INTERNAL_ENCODING', 'UTF-8');
mb_internal_encoding(INTERNAL_ENCODING);
mb_regex_encoding(INTERNAL_ENCODING);

//jqPlotのあるフォルダ

続く...

 メモ20180910

  • 2018/09/10


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
	<nav id="global-nav" class="nav-global">
		top header block.
	</nav>
</header>
<div

続く...



<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript" src="https://www.benri.jp/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

$(function(){
	$.fn.getMiniCalendar();
	
/*	
	$('.Calendar__changeMonth').on('click',function(e) {

続く...

PHPでカレンダー作成サンプルです。
僕の別のサイトへ実装する予定ですので、ここでメモします。
ソースコードを貼り付けます。



<?php
/*------------------------------------
 * 曜日の色を取得
 * @param $i : week number
 *------------------------------------*/
function get_weekday_color($i=0) {
	$calendar_color = array(
						'0' 			=> '#ff0000' ,
						'1' 			=> '#000000' ,

続く...

筆者運営している別のサイトをレスポンシブ対応の際に、スマホ版のナビゲーションを作りました。しかも純CSSで実現されています。
本章ではCSSのみでスマホ版ナビゲーション実現する方法を公開します。
もちろん、いつものようにオリジナルのソースコードを貼り付けます。コピペで利用しても構いませんので、ぜひご確認してみてください。

DEMOページ

以下、CSSのみでスマホ版ナビゲーションを実現するソースコード:


/*---- 注意:TODOコメントを各自対応してください----*/
<!DOCTYPE html>

続く...

今日はCSSのみでスライドアップ風のバナーを実現する方法を公開します。
もちろん、当サイトから公開のものはコピペだけで実例のイメージを確認できます。

DEMOページ

お知らせ:
便利ジャパンはIT三昧で掲載している技術を活用し、開発された便利なサイトです。

ぜひbenri.jpへアクセスしてみてください。

以下のソースをコピペで保存し、ブラウザでページを確認してください。


<!DOCTYPE html>

続く...

当ブログで既に複数の記事でswiperライブラリ利用方法を掲載しましたと思います。
本日はページング付きのスライドサンプルを公開します。
もちろん、コピペーで簡単に再利用できますので、ぜひお試してください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>技術三昧</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

続く...

画面スクロールである要素を画面可視範囲に入ったら、コンテンツを動的に表示する方法です。
ローカルで確認済み、コピペーで使えるので、ぜひご利用ください。
ちなみに、オンラインデモを近いうちにアップロードする予定です。
また、筆者運営している別のサイトbenri.jpにも適用したいと考えており、ぜひご覧ください。

以下ソースコードです。





<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<style>
html {
  height: 200%;
  min-height: 400px;
  text-align: center;

続く...

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18   次へ