メモ

bxSliderという、jQueryプラグインを使ってちょっとハマった時の話。 これは写真などのスライドを簡単に実装できるプラグインでよくできているのですが、ちょっと不具合と言っても良さそうなものがいっこありまして。 どういう現象かというと、スライドの下に●印を表示するってよくあるパターンですが、この●印のハイライトが消えなくなるというもの。 例えば写真3枚のスライドの場合、●印が３つ表示されますよね、下のように。 ●○○ 黒丸が今表示しているスライドだと思ってください。 先ほどからハイライトといっているのは、この黒丸のことです。 （bxSliderはactiveというclassを追加して見た目を変化させています） で、アニメーションをオートにしていると、自然に2枚目に切り替わり、印はこう変わります。 ○●○ 当たり前ですね。 ところがこの丸印部分をマウスで触っていると、たまに２個ハイライトされ、そのハイライトが消えなくなってしまうことがあるのです。 スライド2枚目が表示されている状態で、１つめの丸を触ってこの現象が発生するとこうなります。 ●●○ そして、オートで３枚目に移るとこうなります。 ●○● この１つ目の丸印のハイライトが消えなくなってしまうのです。 この現象が発生するきっかけは、丸印にマウスを乗せたままドラッグして、丸印の外でマウスを離す、というものでした。 要するに、本来の操作ではないので、丸印をクリックしたときのようにスライドは移動しません。 原因はというと、「jquery.bxslider.css」にありました。 今回使用した「bxSlider v4.2.12」に同梱されていたcssでは、78行目に「.bx-wrapper .bx-pager.bx-default-pager a:focus」という記述があり、これが原因でした。 つまり、フォーカスが当たっている丸印がハイライトと同じ見た目になっていて、上述の操作を行った場合に、触った丸印からフォーカスが外れなくなる、ということ。 フォーカスが外れれば表示は元に戻るので、どこでもいいのでページの別の場所をクリックするなどすると、表示は戻ります。 なぜこの記述が入っているのかはよく分かりませんね。 キーボード操作も想定し...

lightcaseの不具合じゃないんですけど、きれいな見た目と簡単に使えることで重宝しているjQueryプラグインのlightcase.jsのtransitionがうまくいかないことがありました。 lightcaseはオプションでフェードインだけでなく、上下左右から写真が出てくるパターンや拡大してくるパターンのアニメーションが用意されています。 必要十分ですね。 今回の不具合はこのtransition設定がうまくいかないというもの。 具体的な現象としては、何を設定しても、もしくは何も設定しなくても、写真が右下から斜めに出てくるという。。。 そんなアニメーション効果用意されてないのに、なぜ？ まぁ、原因は単純で、自分で別途用意したcssで、#lightcase-caseという要素にcssのtransitionが設定されてしまっていてバッティングしていました。 なのでホント、自分が悪いです。（苦笑） cssのtransitionはお手軽にちょっとした動きのアクセントを加えることが出来て便利ですが、jQueryとはとにかくバッティングしますね。 jQuery側でなんか対応してもらえないだろうかとも思いますけど。 とりあえずアニメ系で予期したとおりに動かない場合は、不具合探す前にtransitionを疑うようにしています。

まぁ、使えないってのは語弊がありますか。 Webフォントなんかを使えばいいんでしょうけど、通信料も考えるとあまり日本語のWebフォントは使いたくない気がします。 PCとiPhoneでは明朝系のフォントが表示できますが、Androidではゴシックになってしまうので、英語をセリフ系の書体で指定してしまうと、フォントの混在が気持ち悪いことに。 まぁ、PCとiPhoneでも、游明朝を使っていいのか、とかメンドクサイ問題もありますが、ホームページってのはある程度妥協が必要なものですし、まぁ、広い意味で明朝が使えるんですけどね。 Androidでゴシックになってしまうことに妥協できるかどうか、というところですね。。。 日本語は文字数が多いので、フォントは高いし容量も多いし、文字に関してはなかなか苦労が絶えない。 小学校で英語を教えて話せるようになるとは思えないので子どもに英語教育を強制することに興味はないが、純粋にデザイン的な自由度を考えると、ちょっと英語オンリーのサイトがうらやましいと思えるのでした。（笑） たまに英語版サイトというのも仕事でやりますけど、Googleフォントも結構気軽に使えるし、楽しいんですよね～。

bxslider.jsという、写真のスライドをホームページに簡単に作れるjQueryのプラグインがあります。 僕はプラグインってのは、将来的な互換性だったりとか、不具合があった時に直しづらいとか、カスタマイズ性に難がある（自分で作ってないから場合によっては解析に時間がかかる）ので、あまり好みませんが、それでもlightbox系だったりスライド系ではたまに使ってます。 結局、使うのと使わないのとどっちが生産性が高いかって話なんですよね。 で、bxslider.jsというスクリプト、そこそこメジャーなので、まぁ安心して使えるかな～と思っていますが、アニメーション設定をフェードにしたときに、フェードのアニメーションがチラチラすることがあります。 スムーズにフェードイン・フェードアウトせずに、アニメーションの次の写真が一回見えてしまったりとか。 これはまぁ、プラグインの不具合じゃないというか、jQueryの不具合なのかな～。 JavaScriptの不具合なのかな。 というか、仕様なのかな。。。 ともあれ困るのですが、原因は結構簡単で、cssでtransitionが設定されていると発生することがあります。 自分が書いたcssでなくても、cssフレームワークを導入していたりすると、cssでフェードやアニメーション的なことを実現するために、transitionが、広くいろいろなタグに対して設定されている場合があるのですよね。 例えば、「transition:all 0.2s ease-out;」とかね。 こうしておくと、マウスオーバーでボタンの色を変える場合とかに、0.2秒かけてフワッと変わってくれるのでカッコいいんですけど、jQueryのフェードと相性が悪く。。。 対策としては、bxslider.jsでフェードを使いたい場所については、transitionを外す（初期設定に戻すなど）の必要があります。 例えばbxslider.jsの公式サイトでは、「.bxslider」に対してスライドを設定しています。 css的には .bxslider, bxslider * { transition:initial; } 等としておけば安心ではないでしょうか。 まぁ、このスライダーに限らないんですけどね。 jQueryでフェードする...

このブログは「メモ」というタイトルにしていることにも表れている通り、自分用の覚書としての用途がメインです。 なにになんか最近、アクセスが多い。 なんでかなと思ったら、どうやらスマホにFacebookからSMS通知が来るようになってしまった場合の直し方を調べにきている方が多いようだ。 うっかり設定してしまっていて、うざいと思っている方が多いってことですよね。 まぁ、Facebookからの通知を絶対見逃したくないような場合には便利かもしれませんけど、昨今、通知っていっぱい来ますので、いちいちSMSで通知されたら終始スマホがぶるぶる震えてしまって困ります。 SMS通知という機能があるのは構わないんですけど、予期せずユーザーが設定をONにしてしまうような設定フローにしたことが疑問です。 新しい機能を作ったから使ってほしいという気持ちは分かりますけど。 FacebookのSMSアップデートの通知を切る方法はこちらから↓ FacebookアプリのSMSアップデートの通知をオフにする

Adobe InDesign CC2017でファイルを開こうとしたときに、「ファイルが存在しないか、ファイルへのアクセス権がないか、またはファイルが別のアプリケーションで使用されている可能性があります。」というエラーが出て、ファイルが開けないで、困ったことがあります。 僕の場合は解決できました！ 結論から言うと、原因はファイルの置き場所でした。 開こうとしているInDesignのファイルまでのパスに、日本語が含まれていると開けない。 例えば僕が使っているWindowsで、「C:\ファイル」とかいうフォルダにinddがあるとダメ、「C:\file」というフォルダにすれば解決できました。 途中に日本語（2バイト）の文字列が入るとダメなようなので、なるべくドライブの階層の高い場所に専用のフォルダを作って作業するのがいいみたい。 それにしてもこのエラーの文言、「ファイルが存在しないか、ファイルへのアクセス権がないか、またはファイルが別のアプリケーションで使用されている可能性があります。」って分かりにくいですよね。。。 エラーの起こる可能性が３つも提示されているうえに、どれも違うという。 分かったらなんてことないけど、ハマると大変。 もはや不具合とかバグの類では？と思ってしまう。 ソフトの方で日本語にちゃんと対応してもらうのが一番の解決策だと思うんですけどね。

エントロピーとは何か、という動画。 ほら、よくあるじゃないですか。 日本語で説明されても分かりにくいことが、英語で聞いた方が逆にわかりやすいってこと。 特に輸入された概念については、日本語での説明が回りくどくなりがちで、英語でのストレートな説明の方が意味がとりやすいということは、僕は経験があります。 もしかしてエントロピーとかいうよくわからない単語も英語で説明されれば分かりやすいのではないか、と思ってみてみました。 ・・・ん～、よく分かりませんでした。（笑） 結局あれですね、背景知識がない英語は分かりづらいという現象です。 まぁでも、たぶん興味がある人には分かりやすい説明なんじゃないだろうかという気がします。 TED-Edは字幕もナレーションもしっかりしているので勉強はしやすいです。 この際、英語の知識だけでなく、エントロピーも理解しちゃおうという方向け。（笑）