javascript Fram Works
導入しているjavascriptのフレームワーク。
/*! jQuery v3.3.1 & jQuery Migrate v3.0.1 | (c) JS Foundation and other contributors | jquery.org/license */
スクロールSTOPイベントを追加
Bootstrap v4.3.1 (https://getbootstrap.com/)
Popper.jsが組み込まれている bootstrap.bundle.min.js を利用。
/*! pace 1.0.0 */ ページローディング ← 外した。他のスクリプトとのバッティングが酷い。
//** ブラウザ判定とoldIE用スクリプト Modernizr 2.8.3
//** スマホの position:fix; 対策 iScroll v5.1.1
//** マウスホイール-- jquery.mousewheel.min.js
//** タッチスワイプ-- Hammer.JS
//** タッチパネルでのホバー対策 //https://gist.github.com/rokkohorosi/4282291
CSSは、a:hoverの代わりにa.hoverを使う aタグ以外の場合はclassにtapを指定
//** Lazy Load → lazysizesに変更 / 画像の遅延読み込み。Lazy Loadと同じ設定で動作するように設定済み。
エフェクトがないので課題。css解決。
//** エフェクトパターン集--easing.js
//** imagesLoaded PACKAGED v4.1.0 画像の読み込みを待ってから動作させる。
//** スクロールイベント jQuery Waypoints - v2.0.5
・ページジング(PHPで出力)を調整する：SMAT登録関数
・比率一定のボックス
・画像のfit
・記事整形の制御
・NEWマーク・実行はjqueryで
・ファイルの拡張子を表示
・ハッシュタグをスムーススクロール
・別ページのアンカータグへのスムースにスクロール
？id＝で指定。これでページ送りも対応。
？id＝が残ったまま
mustache.js シンプルテンプレートエンジン
flexibleSearch.js
Highlight plugin for jQuery 検索結果をハイライトするプラグイン
/*! PrettyPhoto */
読み込み時、リサイズ時に実行する関数をまとめて実行。
関数は、専用の名前空間に連想配列として登録。
loadとリサイズイベントを同時に設定しない。
（※スクロール時にリサイズイベントが発生してしまうiosハックが必要だから。）
読み込み時の起動は、相殺が生じるonloadイベントではなくて、readyイベントで実行する。
課題：スクロールイベント時に実行する関数をまとめて実行したい。
_$YN.readyrun.
_$YN.changesizerun
_$YN.readyrun.kawaiiPhoto = function() {}
のように登録しとけば最後にまとめて実行。
使い方：１．対象DOMに、
data-parallax=”scroll”、
data-image-src=”画像のパス”
で背景に指定したい画像の指定する。
使い方：２．対象DOMに、スタイルシート必須。
.bg-para {
color:rgba(255, 255, 255, 0.8); ← 文字が白半透明
background: transparent; ← これは絶対必要。
}
スクロール初回のみパターン
クラス anime-point 付与。
アニメパターン data-animate="fadeInLeft"
動く時間 data-duration="10.0s"
スクロールアップダウンで毎回動作
クラス animate 付与。
アニメパターン data-animate="fadeInLeft"
遅延時間 data-delay="0.1s"
動く時間 data-duration="3.0s"
動く時間 data-offset="100"
Attention Seekers
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
Bouncing Entrances
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
Bouncing Exits
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
Fading Entrances
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
Fading Exits
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
Flippers
flip
flipInX
flipInY
flipOutX
flipOutY
Lightspeed
lightSpeedIn
lightSpeedOut
Rotating Entrances
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
Rotating Exits
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
Sliding Entrances
slideInUp
slideInDown
slideInLeft
slideInRight
Sliding Exits
slideOutUp
slideOutDown
slideOutLeft
slideOutRight
Zoom Entrances
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
Zoom Exits
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
Specials
hinge
jackInTheBox
rollIn
rollOut
javascript Fram Works
導入しているjavascriptのフレームワーク。
/*! jQuery v3.3.1 & jQuery Migrate v3.0.1 | (c) JS Foundation and other contributors | jquery.org/license */
スクロールSTOPイベントを追加
Bootstrap v4.3.1 (https://getbootstrap.com/)
Popper.jsが組み込まれている bootstrap.bundle.min.js を利用。
/*! pace 1.0.0 */ ページローディング ← 外した。他のスクリプトとのバッティングが酷い。
//** ブラウザ判定とoldIE用スクリプト Modernizr 2.8.3
//** スマホの position:fix; 対策 iScroll v5.1.1
//** マウスホイール-- jquery.mousewheel.min.js
//** タッチスワイプ-- Hammer.JS
//** タッチパネルでのホバー対策 //https://gist.github.com/rokkohorosi/4282291
CSSは、a:hoverの代わりにa.hoverを使う aタグ以外の場合はclassにtapを指定
//** Lazy Load → lazysizesに変更 / 画像の遅延読み込み。Lazy Loadと同じ設定で動作するように設定済み。
エフェクトがないので課題。css解決。
//** エフェクトパターン集--easing.js
//** imagesLoaded PACKAGED v4.1.0 画像の読み込みを待ってから動作させる。
//** スクロールイベント jQuery Waypoints - v2.0.5
・ページジング(PHPで出力)を調整する：SMAT登録関数
・比率一定のボックス
・画像のfit
・記事整形の制御
・NEWマーク・実行はjqueryで
・ファイルの拡張子を表示
・ハッシュタグをスムーススクロール
・別ページのアンカータグへのスムースにスクロール
？id＝で指定。これでページ送りも対応。
？id＝が残ったまま
mustache.js シンプルテンプレートエンジン
flexibleSearch.js
Highlight plugin for jQuery 検索結果をハイライトするプラグイン
/*! PrettyPhoto */
読み込み時、リサイズ時に実行する関数をまとめて実行。
関数は、専用の名前空間に連想配列として登録。
loadとリサイズイベントを同時に設定しない。
（※スクロール時にリサイズイベントが発生してしまうiosハックが必要だから。）
読み込み時の起動は、相殺が生じるonloadイベントではなくて、readyイベントで実行する。
課題：スクロールイベント時に実行する関数をまとめて実行したい。
_$YN.readyrun.
_$YN.changesizerun
_$YN.readyrun.kawaiiPhoto = function() {}
のように登録しとけば最後にまとめて実行。
rellaxで背景に置くやり方
何かしらのコンテンツの本文
rellax要素に position: absolute; を指定。
（当然その「wraper」が必要。で overflow:hidden; で切り裂く）
rellax要素に 背景スタイルを指定した要素を配置（高さは大きめを指定。200%くらいでOK？）;
//* 使い方
var rellax = new Rellax(' .rellax ', {
center: true
})
DOMに data属性を付記
data-rellax-speed="-3"
data-rellax-zindex="5"
ブログ一覧（arrylist_out）
arrylist_out($top[blog_list],'blogs');
//【改善】各ブログを再構築してない場合はデータがないので直前のデータを読み込んでしまう。
記事一覧（ページ送り用）
//テンプレを指定
$tmpl = $_SERVER['DOCUMENT_ROOT'] . '/parts/tpl_enlist_top.php';
//記事部分、記事数指定
page_feed_entry_out($entries,10,$tpl = $tmpl);
//ページ送り部分、記事数指定
page_feed_nav_out($entries,10)
ブログ記事一覧（ブログID指定）
//ここで指定すると、問題なく表示されるが「ブログ記事一覧（ブログループテンプレ使用）」で表示されなくなる。
//テンプレとデータを変数化
$linktpl = $_SERVER['DOCUMENT_ROOT'] .'/parts/tpl_linkcards.php';
// mt:MultiBlog mode="loop" blog_ids="4"
$linklst = $_SERVER['DOCUMENT_ROOT'] .'/parts/entry_list.php';
arrylist_out($linklst,'entries',$linktpl,$out='all');
[keywordsでフィルターする場合]
arrylist_out($linklst,'entries',$linktpl,$out='all','keywords','ホゲホゲ');
ブログ記事一覧（ブログループ用・・テンプレ使用）
$looptpl = $_SERVER['DOCUMENT_ROOT'] .'/parts/tpl_blog_entry.php';
arrylist_out($top[blog_list],'blogs',$looptpl,$out='all');
PHP Function
利用できるPHP変数
$top[id] : 1
$top[url] : https://catorea.sphere.sc/
$top[name] : テスト漢字
$top[host] : catorea.sphere.sc
$top[path] : /virtual/alphanet/public_html/catorea.sphere.sc/
$top[relativeurl] : /
$top[des] :
$top[description] :
$top[folder] :
$top[contents] :
$top[option] :
$top[link] :
$top[setting] :
$top[blog_list] : /virtual/alphanet/public_html/catorea.sphere.sc/parts/blog_list.php
$top[search_list] : /virtual/alphanet/public_html/catorea.sphere.sc/parts/parts/search_list.php
$top[json] : Array
利用できるPHP変数（JSONデータ）
$top[json][description] :
$top[json][contents] :
$top[json][option] :
$top[json][link] :
$top[json][setting] :