riot.js + ajax( jQueryなんだけど… )をローカルでチェック

忘れないようにメモ。

marushu/riot-infinite-scroll: Ajax test using liot.js and jQuery( $.ajax) test.

まだゴミが混ざったままなんだけど、忘れる前にと思ってっすね…😅

htmlをサクッと作って、riot.jsを試せるようにしたいと思ってやってみた。browser-syncはホント便利っすな 😀

ajaxのテストで、ホントはfetchを使ってみたいなぁと思ったんだけど、iOS, Androidだとダメぽい?のでriot.js + jQueryという構成になってる…😅

Can I use… Support tables for HTML5, CSS3, etc

polyfillは見つけたんだけど、iOS, Androidは無い感じ。。

github/fetch: A window.fetch JavaScript polyfill.

ホントはWordPressでやりたいけど、今は別のお仕事用なので、とりあえずな感じ。npm install と、npm start の使い方がわかったのが嬉しい 😆

これから、無限スクロールを試すところ。

WordCamp Kansai 2016のハンズオンに参加してホントに良かったなぁと思うところ 😀
あざまーーっす!!

無限スクロールできた

marushu/riot-infinite-scroll: Ajax test using liot.js and jQuery( $.ajax) test.

原型できた 😀
初回読み込みと、「更に読み込む」ボタンをクリック時とmountする場所を変えて、2回目以降は、配列にデータをpushする形で一先ず上手く行った。

…ただ、レスポンスデータの”-“や”‘”や”&”が文字化けしてしまっている…。。
ここはまだ不明。。

…😅
というわけで、まだまだやることは沢山あったのでした 😅

いやぁしかし、ありがたいです!! あざまーーす!!

参考

【メモ】max_input_vars

ajaxでデータを投げる時知ったのでメモ。

返ってきた配列の数がPOSTした配列の数より少なくて原因がわからなかった。
ググってみると、あっさり出てきた。

 

php – Array being chopped off over ajax post. Ajax posting limit? – Stack Overflow

php.iniにmax_input_varsの変更(または作成)が必要だよ。とのこと。
ローカルで変更すると、ちゃんとレスポンスでも同じ数の配列が返ってきた。

今回は、CPIの共用SDプランだったので、php.iniを設置して解決。

【共用サーバーGS】php.iniファイルを独自に設置できますか? | よくある質問 | お名前.comヘルプセンター

max_input_vars integer

入力変数 を最大で何個まで受け付けるかを指定します (この制限は、スーパーグローバル $_GET、$_POST そして $_COOKIE にそれぞれ個別に適用されます)。 このディレクティブを使うと、ハッシュの衝突を悪用したサービス不能攻撃を受ける可能性を軽減できます。 このディレクティブで設定した数を超える入力変数があった場合は E_WARNING が発生し、 それ以降の入力変数はリクエストから削除されます。

PHP: 実行時設定 – Manual ( max_input_vars デフォルト1000 PHP 5.3.9 以降で有効 )

ajaxに関わらずなので、覚えとこ。
共用サーバの場合は面倒くさそう。。

施設内などで表示させる当日イベント作ってみた

館内イベント入力画面

基本は施設内でスマホでアクセスして、「(スタート時間)から(イベント会場)で(イベント名)が開催されます。」というのを画面に表示させるというもの。
作り方はきっとたくさんあるんだろうけど、悩んで作ったのが以下。

使ったのはAdvanced Custom Fieldsプラグイン。ドキュメントもネット上にも情報たくさんある (^^)。
ドキュメントはこちら↓↓
ACF { Advanced Custom Fields Plugin for WordPress

最初に悩んだのが入力画面

イベントの構成はこんな感じ。

イベント構成

この構成が、

  • 平日
  • 土日祝
  • その他(イレギュラーな場合で自由に書き換えが利くように)

とのこと。

各イベント毎に投稿タイプ作れば簡単そうだなぁと思ったんだけど、入力する時のことを思うと、1日のイベントが一画面で見えていた方が便利だ。僕が入力担当だったらその日のイベントが一覧したいってことで、

入力画面作ってみた

冒頭でも書いたけど、使ったのはACF。もうこれはずっとお世話になりっぱなしな気がする。先ずは入力画面。

館内イベント入力画面
各項目入力するのはちょっと手間かも知れないけど、一旦作ってしまえばプリセットっぽい感じにできるかも (^^)

この画面が最適かどうかは別問題として、全く素人のカミさんに黙って見せて、入力方法がわかったようなので、この形で進めた。

で、次は入力したデータを出力。コードはこんな感じ。

タブが広すぎ…^^;

今回は一つのWordPressの中に別ヘッダ作って、特定固定ページ配下はスマホ用のレイアウトに変更するってやり方で作ったので、content-xxx.phpみたいな感じで用意した。

ここで気になるのが、ACF使った場合、いつも各項目をget_fieldで持ってくるんだけど、項目が多くなると、いちいち面倒。まとめて一発で持ってくる方法ってないのかなぁ…

実際に出力

今回は、当日のイベント表示なので、本来はリアルタイムで表示させられたらそれが一番いいと思うんだけど、あれこれ調べたり、相談したりした挙げ句、GOWASの藤井さんから教えていただいたシンプルなやり方で行くことにした。

流れはこんな感じ

  • jQueryの.load
  • タイマーで一定時間おきにデータを取得
  • Web Storage を使って判定
  • content-xxx.phpの内容をフッターへ読み込む

で、タイマーの部分はコレ

各イベントは10分前から表示させるんだけど、ウザかったら非表示にしたいのでこの部分でWeb StorageのsessionStorageに

  • イベント名
  • イベント(○回目)の終了時間

をセットして、非表示になったイベントが実際に終了したときはsessionStorageを削除するといった流れになるよう書いてみた。

プリセットっぽく選択する

平日、土日祝、その他と3パターンのイベントを作成したら、別途用意しておいたページ内に用意したラジオボタンで選択する。

イベントパターン選択

平日、土日祝とか自動化した方が楽ちんかなぁと思いつつも、パッと思いつけなかったし、ある程度手動の方が良かったりして…と言い訳的な考えもあって、この形に (^^)

イベントの出力で一番悩んだところは同じイベントが複数回あるところ。
非表示の設定が難しかった。。。

そもそも論だけど、イベント登録自体を変えればあまり悩まなくて済んだのかもしれないけど。。 (^0^;)

それから、今回いろいろな方に雑談から相談になったり、いろいろアイディアをいただいたりしてとても勉強になったし、ありがたかった。

1人じゃないってホント素敵っすね 😀

それからもし「このクソコード!!」とか思う優しい人がいたらツッコミをおなしゃす (^0^;)