メモ

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は字幕もナレーションもしっかりしているので勉強はしやすいです。 この際、英語の知識だけでなく、エントロピーも理解しちゃおうという方向け。（笑）

今週の話題は、先週末から世界中で被害が相次いでいるランサムウェア。 ランサムは身代金ですね。 日本語でもなじみがない方もいるかもしれませんが、最近たまに出てくるコンピューターウイルスの一種で、特徴としては、コンピュータをロックしたりファイルを暗号化して人質にとり、解除のための身代金を要求する類のものです。 今回のものはNSAから盗まれたプログラムが使われているだとか、北朝鮮が絡んでいるんじゃないかとか、いろいろ言われていますが、世界150カ国以上で被害が出ているようなので、大変な犯罪です。 今回の単語はsurge、ransomware、stopped in its tracks。 surgeはよく使う単語ですね。 ransomewareはニールさんも最近初めて知ったといっていますが、特定のウイルスの呼び名なので、日常会話ではあまり使わないかも。 でも、ransomは身代金なので、初めて聞いても英語圏の人はだいたいわかるのでしょうね。 日本人がランサムウェアと言われても、何のことやらさっぱりわからない場合が多いでしょう。 最後のキーワードが出てくるニュースですが、なんでも今回のランサムウェア、特定のドメインと通信をしようとしてできないとPCをロックするとかいう仕組みらしく（僕の理解ではたぶん笑）、とあるイギリスの男性がそのキーになるドメインを取得したことで被害が相当減ったんだとか。 英語的な難易度としては、今回の話題の背景知識の有無が大きく影響するかなと思います。 IT系の話によく触れる人にはおなじみの話なので取り組みやすいですね。

イランの北東部に位置するナシュティーファーンという街には、1000年の歴史があるとされる風車があります。 この風車、なんと現役で使われていると言うから驚き。 この街は風が強い場所にあり、風車は街を守る役目と、風を生活に利用する役目を兼ねています。 西から伝わった技術で作られたとのことですが、材料は粘土・藁・木材など自然のものだけ。 そんな歴史ある風車ですが、風車を守るNish Toofanさんはご高齢で、その技術を受け継ぐ方がおらず、存続の危機にあるようです。 伝統ある風車を残すか廃止するのかは地元の方の選択ですが、この映像を見ると、まだ長く残ると良いなと思います。 英語的にはナレーターの方は結構訛りがあり、聞き取りにコツが要ります。 BGMは美しくて良いのですが、声が小さめでちょっと聞き取りづらい面もあるかな。。。 字幕はちゃんとしたものが付いています。

世界一高価なスパイス、それはサフランだそうです。 サフランって名前は聞くけど日本だとあまりつかわないですかね？ 世界一高価というのは、グラムあたりということだそうです。 サフランは少ない水で育つので、雨の少ないイランで栽培が盛んで世界中のシェアの90%を締めます。 ただ乾燥しているだけではなく、土の質が適していることと、ほどよい堅さが地中の湿気を閉じ込めるので良いサフランが育つのだとか。 170,000の花から、1kgのサフランが出来ると言うことで、なんか、ホントにちょっとしか出来ないのですね。 そんなサフランには心臓や循環系の機能を改善する他、いろいろな薬効があるそうです。 英語的には、ナレーションは少なくゆっくりしているものの、訛りがあり注意して聞く必要があります。 それと、冒頭は字幕だけ、また途中で現地の方のお話も英語字幕で追うことになりますので、すばやく読む練習にもなりますね。 National Geographicらしい美しい映像と音楽が心地よいです。

methodという会社を中心にした、エコに取り組む活動の話。 例えばケニアの西部は雨期には雨がたくさん降りますが、川に流れた水は洗濯や動物の飲用水にもつかわれ、人間が飲む水と分かれていないため、特に下流では汚染が酷いそうです。 methodの商品の主な材料は水なので、水をきれいにする技術を持っていて、その活用範囲を広げているのだとか。 それ以外にも屋上に温室を作るなど、地球に優しい工場造りを進めています。 その他にも、発泡スチロールを環境に優しい接着剤にかえるプロジェクトをしているガールスカウトの女性や、水の濾過器を作っているLifeStrawの話が紹介されています。 「誰かがやっているから自分は取り組まなくて良いということではなく、みんなの小さな取り組みが大きな変化を生み出す」 「子どもたちは、『将来はもっとよくなる』と言うけど、待つ必要は無い、今大きな変化を起こすことが出来る」 など、実際に活動されている方々の言葉は心に響きますね。 英語的には、話者が色々変わりますが、基本的には聞き取りやすいと思います。

Paranormal InvestigatorのJoe Nickellさん。 一言で言うと、超常現象を科学的に証明している人です。 日本にもいますね、そういう人。 まぁ、いわゆるオカルトというのは多分に心理学的な面がありますので、嘘、というより、勘違いというか、ごく普通のことなのに、思い込みで幽霊や宇宙人が見えてしまうという例は多くあるわけです。 中には意図的にそういうものを作り出す人もいるでしょうね。 一方でオカルト好きな人もいるわけで、Joeさんはそういう人からは、「台無しにするな」と怒られるそうです。 I am raining on their parade.というのは面白い表現ですね。 もともとは手品師だったそうですが、トリックを暴露する方に向かったようで。 お化け屋敷や空飛ぶ円盤にも興味があったので、それを解明するということを始めたらしいです。 40冊の著書の中では奇跡や宗教的な神秘、人体自然発火、湖のモンスターなどについて書いているそうです。 Joeさんによると、「幽霊はいない」そうで、まぁ、そういっちゃあ身もふたもないというか。（笑） オカルトはなんとなくロマンみたいなところもありまして、嘘くさいことには気づきながらも想像するのが面白いのでしょうけど、Joeさんにかかるとバッサリ切られますね。 英語的には、Joeさんはハッキリゆっくり話していますので聞き取りやすいです。 ただ、話題が話題だけに単語が難しいですね。

今週はフランスの大統領選の話題でニールとダンが語ります。 キーフレーズは、a landslide victory、an uphill battle、a breath of fresh air。 どれも、構成する単語は簡単ですが、セットになるとちょっと難しいものもありますね。 どうもニールとダンのコンビは6 Minutes Englishではすごく息が合っているのに、なぜかNews Reviewではいまいちな気がする。 ちょっと単語の説明で盛り上がりに欠ける気がするんですよね。 好みの問題かな？ フランスに続き韓国の大統領戦もありまして、選挙の話題が多くなっているような気がします。 選挙関係のボキャブラリは日常会話であまり使わないものもありますが、ニュースを読むには必須なので押さえておきたいですね。 とはいえ、News Reviewではニュースから単語を引っ張ってきて日常会話で使えるようにするというのが目的なので、こういうフレーズが選ばれるのかな。 英語的には、分かりやすいですけど字幕がないのが残念なのと、ダンの喋りはたまに声が低く速くなりがちで、個人的にはちょっと苦手です。

サウスカロライナのBishopvilleにある、Pearl Fryarさんの庭園の話。 Pearl（真珠）さんとはきれいな名前ですね。 1981年に庭造りを始め、地元のYard of the Month賞をもらうに至りました。 家を買いに行ったときに、なかなか売ってもらえなかったそうなのですが、理由は「アフリカ系アメリカ人は庭造りをしない」ということだったそうで、当時はそういう偏見があったそうです。 なので、Yard of the Monthを受賞すれば、そういうことを言う人に、それが偏見だと輪かっもらえるだろうということで始めたんだとか。 300本ある木ののほとんどは、地元の幼稚園からのリサイクル用ゴミ箱からとってきたものだそうです。 しかも水をやったり、肥料をやったりしない、薬品を一切使わない自然な方法で育てているそうです。 それなのに、立派な美しい庭園になっているから驚きですね。 Pearlさんの庭園は世界中から観光客が訪れるそうで、日本からの客もいるんだって。 ぜひ行ってみたいですね。 英語的には、Pearlさんはご年配で訛りもあるせいか、英語を話していますが別途字幕が付いています。 確かに一度で聞き取るのは難しい気がしますけど、これも生の英語ですから、何度も聴いて攻略したいですね。