2019.10.22
新機能を実装してました

感想をアーカイブする的な? Twitterでもつぶやいたりするんですけど、アーカイブしづれえなと思ったので、WordPressで管理することにしました。まだ何も投稿していないので表示されませんが、PC版は左下に、SP版は下部固定になります。 機能は単純、感想書く用のブログを一個追加しただけです。Tweetの問題で、これまで使っていたSNAPとかいうプラグインをやめてWP to Twitterに戻しました。こっちはこっちでハッシュタグが上手く呟けないという問題があるんですけど。 作成・修正を行ったページ数は3枚。・header.php(左下固定で新着3件表示)・archives-impressions.php(「感想」のアーカイブ)・single-impressions.php(「感想」の詳細) 一応稼働は今回のM3からを予定しています。上手く動けば。 結局休日を1つ潰しきった なんだかんだで休日が潰れたんですけど!!!ていうか東京行きの準備しないといけないのになんでこんなことしてんの!?!?!? よくよく考えてみると、別にこれM3が終わってからでも良かったんですよ。なんでぼくは急にこれをやり始めてしまったのか…。理解に苦しむね。 まさか1日かかるとは思ってませんでした。正直やる気出なさすぎて途中で休み入れまくってたからってのが原因なんですけど。それでもちゃんとメイン投稿とは別でTweetできるように設定したし、SP版もわりとちゃんと機能するようにしたし…。バグがあるかどうかは実際に稼働してみないとわからんすけど。 上手く行ったらぼちぼち投稿数を増やしていきたいなーとか考えてます。書くことなくなるか、飽きるかでストップするかもしれませんが。ちなみに、それを見越してか日付はあまり表示していません。なんか嫌でしょ、新着記事が1年前とかになってるのって。 とりあえずこれから東京準備始めます…。 それでは今日はここらでサヨウナラー

2019.10.15
文字列の省略は「shave」を使うというライフハック

悩んでないでプラグイン使ってホラ webやってると、文字列の省略を求められることがあるんですよね。そういうときの解決策としては、IEを切り捨てていいのなら真っ先にCSSの-webkit-line-clampとかが選択肢に現れます。ただ、大抵のクライアントはIEくんの救済を求めてきます。 「IEだと三点リーダーが出ないんですけど、これバグですか?」 オメェの頭がバグってんだよ!!!!その小せえ脳みそ使ってIEのシェアについて考えてみろや!!! ということも言えるはずもないので四苦八苦、口八丁、あの手この手でのらりくらりと解決するはず。 そんなことしねぇで、よほどの事情がない限りはプラグイン使おうぜ。 Shave jsで上手く文字列省略を実現してくれるのがshaveくんです。この前見つけて使ってみて案外使いやすかったです。 shavehttps://dollarshaveclub.github.io/shave/ shave - githttps://github.com/dollarshaveclub/shave ダウンロードしたファイルを解凍して「dist > jquery.shave.js」が目的のブツになります。ぼくはjQueryに頼らないと生きていけない人間なので、jquery.shave.jsを使います。 使い方は至極簡単で、誰もが知ってるjqueryを何らかの方法で読み込んだ後、そのままの勢いで上記のjquery.shave.jsも読み込んでください。 デモhttps://saikofall.com/test/shave/ 一応デモ用でページ作ってぽいっとしました。この3つのデモは下のソースで動いています。 あら簡単。1番目と2番目の違いは、ウィンドウサイズを小さくしたり大きくしたりするとわかると思います。わからない人はセンスのない人です。何年ネットサーフィンして生きてきたの? jQueryで使うつもりなら、指定したい要素にshave(高さ)という関数を与えれば動きます。リサイズとかで動くようにすれば更に良い感じになるんじゃないですかね。(ぼくはそうしてる) 数値は高さを指定する形になるので、基本は高さ固定です。そもそも省略するときは大体高さ固定だし、多少はね? 注意点 軽い説明記事みたいになりましたが、注意点があります。これ、多様すると多分重くなると思います。中身解析してみたわけではないので一概には言えませんが、jsでの文字省略って結構重かった気がするんですよね。しかもshave自体、2,3年前とかの古いプラグインだし…。 ページ内の要素で3つ4つぐらいをresizeでかけるぐらいなら大丈夫だと思います。実際、最近そういうのをやったときは問題なく動いたんで。 まだ試してはいませんが、今度どのあたりが限界点になるのか試してみたいと思ってます。リサイズするたびに止まるぐらいには重くなると思うんだよな…。 まあ、個人的には多ブロックでも使えて死ぬほど使いやすく思ってるのでメモもかねて説明記事にしました。自分の引き出しにできれば最の高ってやつで。 それでは今日はここらでサヨウナラー

2019.10.13
M3のためにイベント用サークルリスト作成サイトの改修をするなど

こんなことに時間かけてるからダメなんですよ ※各サークルさんの画像を勝手に使ってます。 怒られたら消します、怒って。 前回のM3で使ったものの、意外と使いにくかったweb版サークルリスト。こいつをなんとか使い物にしてやろうと頑張ってました。割と頑張ったと思うの。 サークルリスト(ぼくの)https://www.circlelist.site/saikofall/ 使い道はふたつ。 1.リスト閲覧用主に当日以外で何を買うのか見るためのものです。サークル名・頒布物名・ブース番号・値段・作品(サークル)HP、といった項目を表示しています。現在バグっていますが(後で直します)、上部のイベントインフォでは合計金額なども表示します。 2.当日チェック用当日に会場内で次何を買うのか見るためのモードです。左上にある「当日仕様に変更する」というトグルをオンにすると、それぞれの表示がスマホで見やすいものに変わります。なぜかPCとスマホで背景色が変わってしまってるので後で直しておきます。 という感じです。 ちなみに、このサイトはWordPressで出来ているので、ブログ的な感覚でサークルリストを作成する形になります。 一応誰でも使えるようにユーザー単位で管理できるようにしています。もし使いたい人がいたら言ってくれよな!!!!M3だけじゃなくて他のイベントでも使えるようにしてあるぞ!!!! 最終的にそんな感じの機能を持ったサイトになりました。意外と時間かかった…。 これから予定している改修とバグ直しについて 1.サークルの重要度どこが最優先なのかなど、そういう情報を載せます。少なくとも今回のM3ではその辺の管理ができるようにサークルチェックサポートも作ったので、なんとかそれに合わせたいところ。 2.「ここはもう行ったよ」機能当日になって、「このサークルのは買った」という情報が入るようにします。正確には、なにかボタンを作って、それを押したら背景色が変わる感じです。 3.全体マップ表示これ致命的なんですけど、なんとかして全体マップを読み込ませることができるようにします。最悪固定で入れておきます(M3のやつ)。 4.バグ直しなんか色々と拙い部分があるのでそれを直します。背景色がPCとスマホで違うとかそういうの。 以上です。 ちなみに、このサイトを作った理由は実に単純です。会場内で紙を取り出してじっくり考え込んでる人が邪魔だからです。たまに紙落としている人とかいるので、そうなりたくなくてスマホで見れるようにしました。少なくともデケえ紙広げて他人の邪魔になることは少なくなる、はず…。 というわけで使いたい人が言ってくれよな!!!!!!! それでは今日はここらでサヨウナラー

2019.10.04
M3サークルチェックサポートサイト(β版)が完成しました

エセWEB屋さんだけど頑張ったんです というわけで完成したのがこちら。 https://saikofall.com/m3list/ 結構頑張りました。ここまで使った時間は、大体2人日分ぐらい?多分20時間も使ってないと思います。 とりあえず現状できることとしては、 ・リンクをクリックすると、そのリンクの上にチェックマークが表示される・そのサークルが用意したリンクすべてにチェックマークがつくと、右上に「済」がつく・サークルにマウスを持っていくと、左上にお気に入りタグが出現、クリックで色メモが表示される・色メモ内の好きな色をクリックすると、サークル名の上にその色がつく(色分けができる)・チェックマーク、済マーク、色はブラウザに保存されるため次回訪れたときもそのままの状態で表示される といったことです。それとまだ未実装の機能としては、 ・メモの削除(今日中に作ります)・済マークを除外する(必要?)・メモの色でソート、絞り込みを行う っていうぐらいです。メモ削除は緊急でこれから作ります。メモの色ソートと絞り込みは余裕のあるときに作ります、個人的にほしいのでそれなりに急ぎます。 全体的な仕様について? webStorageという機能で作られています。基本的にjsで出来ているので、セキュリティ的な問題はないと思います。ていうかログインIDとかがあるわけでないのであんまり気にしてません。ガバガバ実装なので怖い人は見ないほうがいいと思います。ぼくはセキュリティ分野はわけわかめなのでその辺はなんも知りません。 localStorageというのを使っていて、よほどのことがない限りは消えません。もし全部削除したい場合、Chromeなら 開発者ツール > Application > Local Storage > ドメイン まで行くと、ドメインで右クリックできるので、そこでClearすると消えます。ただこれだと全部消えるので注意してください。 一応これからの実装として、メモの削除とかを用意してます。 ちなみに、ぼくはStorageの上限を知らないので、もしかしたら使うと途中でメモできなくなったり予期せぬエラーが出る可能性があります。それは知らんので、ぼくもドキドキしながらこのチェックサポートを使います。 もしこれを使いたい人がいた場合、頑張ってドキドキしながらサークルチェックしましょうね。 それでは今日はここらでサヨウナラー

2019.09.04
validate.jsではdisplay:noneした要素をvalidateできない

今年で一番冷や汗かいた 死んだね。今日提出のファイルがあったので、その準備をしてたんですね。最終確認ってことでフォームのテストをしてたんですよ。 今回はフォームを使う必要があって、もしかしたらPHPが使えないかもってことでフォームのミスチェックをjsでしてたんです。使ったのは(多分)有名なvalidate.js! jsでバッチリ動いてたのを前まで確認していたのですが、今日やったらなぜか動かないわけで。もう提出の期限は1時間もなくて、冷や汗かきまくり。意外と涼しくてエアコンが付いてなかったのもあってまさしく生き地獄。久々に死ぬかと思いました。 20分もかけてようやく原因を特定し、無事提出することができましたが正直死ぬかと思いましたね。おやおや?って状態からおやおやぁ!?!?!?ってなったわもう。 ほんま死ね。 原因について validate.jsでは、存在しない要素をvalidateすることができません。特にありそうなのが、フォームのラジオボタン。最近は装飾を施すことが多くて、下のみたいに普通のやつとちょっと違うパターンが結構あります。 See the Pen vYBWeOw by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. この程度なら30分もいりませんし、わりと簡単に色々できるのでデザイン上もそうなってることも多いです。 実はこれがvalidate.jsを使う上で問題になります。このjsって、基本的に存在しない要素をvalidateすることは不可能なんですよね。事実上述のcodepenで見てもらうと、ラジオボタンがdisplay:noneされてるかと思うのですが、こいつのせいで動いてなかったようなのです。 まあ攻略法は別にそんな難しい話ではなく、display:noneになっている部分をopacity:0で消してあげればいいだけの話です。ただそれだと要素として存在してて変になってしまうので、今回はそこにheight:0とwidth:0をかけて完全に存在しないものとして扱うことにしました。ひとまずはこれで動くようになったのでセーフです。 ちな みに、上記したやり方で対応すると、ブラウザによっては変な見え方をしてしまう可能性があります。例えばsafariとかな!!!!多分このブラウザで見ると変な浮き方をしてしまっていると思います。今日は何も言わずにオッケー!とか言いましたが実は全然オッケーじゃなかったりします。 どうしよ。 validate.jsは非常に便利なんですが、ここだけなんとも言えないっすよねー。つーか面倒だからデザイナーはラジオボタンとかに装飾付けるのやめてクレメンス。 それでは今日はここらでサヨウナラー

2019.08.18
必要に駆られて「grid」の使い方を調べる

Gridレイアウト 技術ネタ発表みたいなのがあるので、Gridレイアウトについて話すことにしました。問題として、ぼくがこれの使い方を完全に忘れてたので、ここでまとめておきます。 CSSプロパティ「grid」は、flexみたいに要素を整列させたりすることができるdisplayの値のひとつです。flexとは違って、描画サイズを自分で決めて、その中で要素を好きな位置に置いていく変な指定方法を取ります。 親要素に「display:grid」を敷いて、描画サイズを決めます。その後、子要素に対して「ここに配置する」というプロパティを設定すると、そこに子要素が配置されていきます。 ぼくが使ったことのあるプロパティとしては、 display: gird(基本値:親要素)grid-template-rows(横列の長さをひとつずつ決める:親要素)grid-template-columns (縦列の長さをひとつずつ決める:親要素)grid-row(横列のどこに置くか決める:子要素)grid-columns(縦列のどこに置くか決める:子要素) IEはそれ用に別途プロパティが用意されてるのでそれを使う形になります。詳しい説明とかはW3Cでも見てみりゃ書いてあると思いますよ。 過去に使った案件 こいつを使った案件は、地方のローカルニュースサイトです。新聞みたいなレイアウトを求められたので普通にflexとかで組んでいたのですが、システム組み込みで面倒が起きたらしく、「自由に置けるようにしてくれ」と言われたのでgridプロパティを使いました。 使ってみるとそれなりに便利で、同階層のdivを好きな位置にレイアウトできるのでシステム組み込みが必要な場合にもわりと使えるプロパティです。新聞紙とかの変なレイアウトを求められたら意外と使える便利なヤツ。 ただ、IE用のプロパティはあっても完全には対応できなく、中途半端なレイアウトを実現しようとすると途端に使えなくなったりします。実際、システム会社から管理画面作成を依頼されたときに使ったら、IEがボロボロになったのでやめました。普通の表組みとかには、普通にtable使いましょう(という教訓)。さっきの新聞紙みたいな突き抜けたレイアウトぐらいじゃないと現状使えないと思います。IEが全部悪い、Chromeなら開発者ツールでも便利に使えるレベルなのに。 明日のネタ用 という話を明日のネタとして使う想定で書きました。実際、gridレイアウトは使えるヤツだと思います。ただ、繊細な使い方をしようとすると色々複雑で面倒なので、その辺を許容してくれるデザイナーの元で使ったほうがいいです。例の案件では、デザイナーが「いやもうそれでいいでしょ十分でしょ」ってなったのでセーフだっただけの話です。 具体的に言うと、一列一列が親要素で指定した横幅、または縦幅になるので細かいレイアウトには向いてないです。結構ざっぱに、でも変な置き方を指定されてる表組みとかでは使えると思いますよ!!!そんな機会そうそうないけどな!!! 現状ほとんど使った試しのない値だったりするんですよね、実は(取り扱いは過去の案件ひとつだけ)まあそのうちまた使いますよ、わりと嫌いじゃなし。みんなも使おうGrid Layout! それでは今日はここらでサヨウナラー

2019.08.16
wordpressで起きた「更新に失敗しました」問題

hetemlに対してブチ切れる午後5時 今日もせこせこしこしこお仕事三昧。納期が目前に迫っている案件をやっている中突如現れる、「更新に失敗しました」! 失敗しました、じゃねーんだよ。せめて何がエラー起こしているのか原因を記述せよって言うんだよ。その辺親切じゃねえのどうにかしろよ!!! 【事件概要】・WordPress 5.0.2を利用中のサイトにおいて、固定ページの更新が失敗する減少が発生・PHPのバージョンは5.4と古いもので、それが理由でWordPressも古いものを利用していた・hetemlではエラーログを見ることができるが、PHPエラーログには何も表示されず 【行った対応】・hetemlでは特定の記述を.htaccessにすることでPHPバージョンを管理することができるので、7.0に上げてアップデートを実施・原因と思われるプラグイン等を停止、削除 以上が事件の概要です。新規作成は上手くいくのですが、過去の固定ページを更新等しようとするとなぜか「更新に失敗しました」と表示されて更新がされませんでした。記述を削除していってもなぜか失敗するので、実質更新が不可能に。 調査結果と対応策について 結論としては、hetemlが常備しているWAFが原因だったみたいです。以下、原因と対策です。 【根本的な原因】hetemlのWAFが、WordPress5.0以上で実装されたGutenbergの更新機能を攻撃とみなしていたことが原因でした。Gutenbergのみ?更新などの際にJSを使って非同期にしている?らしく、それに使うJSがエラーを吐いていたみたいです。そのため、開発者ツールでconsoleを見てみたら、 api-fetch.min.js ってやつがエラーを起こしていました。ここで止まっていたということですね。 【対応策】調べてみたら過去に記述していた人がいて、hetemlのWAFを通らせるようにしたら直りました。 https://heteml.jp/support/manual/waf/ 上記はhetemlのWAF設定についてです。 hetemlでWAFログを見てみるとわかるのですが、恐らくWordPressの更新処理が攻撃性のあるものとして弾かれてると思います。そのため、その処理を「攻撃ではありません!」と設定する必要があります。 ログに何の処理がエラーになっているか記述されていましたので、それを.htaccessの一番下に記述したら更新できるようになりました。 以上 それでは今日はここらでサヨウナラー