月別アーカイブ 5月 2018

村上 著者:村上

【CSS】要素のタッチやクリックを無効にするpointer-eventsプロパティ

/タイトル通り、今回は要素に対するタッチやクリックを無効化する方法について。
button要素であれば、下記のように disabled を指定すれば、クリックができなくなりますが、それをdiv要素などで行う場合です。

<button type="submit" disabled>無効化されたボタン</button>

 

使うプロパティは「pointer-events」です。
こちらのプロパティは、初期値は auto が指定されています。
この値に、none を指定することで、要素に対するクリック・タップを無効化することができます。

サンプルはこんな感じ。

<div>
    <p>無効化された要素</p>
</div>
div {
    pointer-events: none;
}
$("div").on("click", function(){
    alert("div click!");
});

こちらを実行すると、div要素をクリックしてもアラートが表示されません。
ちなみに、スマートフォンでも動作します。

 

ということで、div要素などのクリック・タップを無効化する方法でした。
なかなか、butto要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。

  • この記事いいね! (0)
takahashi 著者:takahashi

NHKラジオがRadikoでリアルタイム配信の試験を開始

先日、ふとRadikoを立ち上げたところ、NHK系列のAM/FM局が選局リストに追加されていました。

NHKはもともと、独自のサイマル放送サイト”らじるらじる“で配信していて、例えば、スマホで今いる地域のラジオ局を可能な限り網羅しようとする場合は、Radikoアプリとらじるらじるアプリの両方を入れる必要がありました。

そんなNHKとRadikoですが、NHKと民放連との共同ラジオキャンペーンの一環として、2018年4月12日から2019年3月末まで、全国47都道府県でradiko.jpからNHKラジオが聞ける実験配信を開始したとのこと。

radikoでNHKラジオの実験配信、4月から全国で 無料でライブ聴取可能 – くらテク

ということで、当分の間は多くの地域でRadikoアプリ一つでNHKも含めた各局のラジオを高音質で聞くことができます。

折角なので、普段ラジオをあまり聞かないよ~という方もこの機会にラジオの魅力を再発見してみてはいかがでしょうか?

Radiko.jp

  • この記事いいね! (0)
著者:杉浦

デメテルの法則

wikipediaから引用

基本的な考え方は、任意のオブジェクトが自分以外(サブコンポーネント含む)の構造やプロパティに対して持っている仮定を最小限にすべきであるという点にある。

 この法則の考え方の目的はコーディング上のケアレスミスによるバグの発生予防にあります。この考えは特にグローバル関数を用いずゲッター、セッター、ローカル関数を用いることで実現されます。
 各種プログラミング言語にはグローバル変数という便利な仕組みがあります。グローバル変数はクラス、メソッドをまたいでどこからでも参照できる変数です。グローバル変数を用いた場合、様々な制約を無視してコーディングができます。一方でグローバル変数を多用して巨大なり長大なりなコーディングを行った場合、思わぬところでグローバル変数が使用されていて思わぬ動作を起こすという事故を引き起こします。
 getter、setterはあるオブジェクトの保持する変数をget(呼び出し、受取)、set(代入)する目的の関数のことです。例:オブジェクトAの持つ変数nameをgetする関数nameGetter、オブジェクトBの持つ変数telに任意の値をsetする関数telSetter
 デメテルの法則にしたがった場合、グローバル変数を多用することはなく、getter、setterを用いてコーディングを行います。これを行った場合、不意にある値を呼び出すことそのものが少なくなるため、ある値に想定外の動作をさせるということが減ります。つまりグローバル変数と大して変わらぬ便利さで安全にコーディングを行えます。
 一方でデメテルの法則を守った場合、コーディングの際の手間が増えます。ある変数を作るたびにgetter、setterを作るべきか考える必要があったり、そもそも打ち込む文字数が増えたりします。最も打ち込む文字数の方に関してはIDE(統合開発環境)がgetter、setterをショートカットキーでパパっと作ってくれたり、打ち込みたい関数名を予測してくれたりで楽ができます。また、IDEを使う前提を考えた場合、IDEが色なりなんなりで今扱っている変数がグローバルなのかローカルなのか等々色々示してくれます。結局安全性と生産性のトレードオフになりがちなので、こういう考え方があるということを頭に入れておくぐらいがいいのかもしれません。
 getter、setterを用意しているからと言っていたるところでいたるところをガンガン書き換えるプログラミングはやめましょう。手間もかかるしバグも起きるしでただ辛いです。

  • この記事いいね! (0)
著者:ym

GDPRとクッキー

2018年5月25日にGDPR (EU 一般データ保護規則) が施行されましたが、始まってすぐ Facebook と Google が提訴された様です。

罰金となれば Google 側が 4700億円で、Facebook関連は39億円。

FacebookやGoogleに限りらず、どの企業も罰金となった場合には最低でも 26 億円となるため、果てしない金額です。

今は IP が対象ですが、クッキーも対象になる 「eプライバシー規制」の準備にはっている様です。

  • この記事いいね! (1)
takahashi 著者:takahashi

WIndowsでPCの指紋センサーがおかしくなった時の対処法

Windows10から Windows Hello が搭載され、指紋センサーとそのドライバさえPCに搭載されていれば専用ソフトなして指紋認証ログインができるようになりました。

毎回PCのロックを解除するたびに長いパスワードを入れないといけないことを考えると指紋認証が使えるだけでかなり楽になりますよね。

この指紋認証センサーですが、Windowsの場合まれに不具合が発生して利用できなくなることがあるようです。
そんな時の対応方法をご紹介したいと思います。

1.単純に再起動してみる。

Windows OSは非常に複雑で、裏ではたくさんの仕組みが協調動いています。起動してしばらくすると、何らかの原因でこれらの仕組みの一部が上手く動作しなくなることがあるようです。
指紋認証ができなくなった場合、まずその可能性が考えられます。

再起動する際に注意する点として、”シャットダウン”→”起動” ではなく、必ず”再起動”してください。
シャットダウンの場合、設定によってはシャットダウン前のOSの状態が残ってしまう場合があります。

Windows10 – 高速スタートアップを有効/無効にする方法 – PC設定のカルマ

2.デバイスをWindowsに”再認識”させる

1を試しても駄目な場合にこの方法を試すと解消される場合がありました。
まず、スタートボタン(Windowsのロゴのボタン)を右クリックして、”デバイスマネージャー”をクリック。

下のような画面が開くので、中から”生体認証デバイス”を選択して項目を展開します。

すると、今お使いの指紋認証デバイスが出てくるかと思います。
対象のデバイス名を右クリックすると”デバイスのアンインストール”という項目があります。

クリックするとダイアログが開きますので、“このデバイスのドライバーソフトウェアを削除します”にチェックが入っていないことを必ず確認したうえでOKをクリックします。

デバイスマネージャーの一覧から消えたことを確認したうえで、PCを再起動させます。

単にデバイスを削除しただけであれば次回起動時やプラグアンドプレイの再認識を行った際にデバイスが自動的に認識され、再インストールされます。
ただし、”このデバイスのドライバーソフトウェアを削除します”にチェックを入れてしまった場合はドライバが削除されてしまうため再認識されなくなってしまいます。
もしドライバを消してしまった場合はドライバーソフトウェアの再インストールが必要になるので注意してください。

再起動後に再度動作を確認してみて、元通りうまく動作すれば作業完了です。

3. 1、2の手順を試してみてもダメだった場合、ドライバーソフトウェアの再インストールが必要になるケースがあります。

ドライバーソフトウェアはメーカー製PCの場合はそのメーカーのサイト、外付けの指紋認証センサーであればそのセンサーを販売しているメーカーのサイトや付属のCDからインストーラーを起動して再インストールします。

また、ドライバによってはバグが発生しているバージョンが存在している可能性があり、そのバグが原因で正常に動作していないことも考えられます。
もしメーカーにもともとインストールされていたドライバよりも新しいものが公開されている場合は、必ず最新のものをインストールしてみてください。

ソフトウェア的な問題であれば、ここまでの手順で代替問題が解消されているかと思います。

* もしそれでも解消されない場合

上の手順を試しても問題が解消されない場合、OS本体の不具合であったり、ハードそのものに問題がある場合も考えられます。
取り外せるものの場合は、一度他のデバイスでは正常に使えるかなどを確認し、問題がありそうであれば修理に出すことをお勧めします。

  • この記事いいね! (1)
著者:杉浦

chrome開発者ツールのコンソールでDOM操作を行う

 これはjavascriptを用いた開発で特に役に立つと思います。”javascriptのソースコードでやりたいDOM操作のコーディングを行う→目的のページをリロード→チェック→コーディング再開”なんてことがめんどくさい時に使えます。 GoogleChromeなどの多くのブラウザにはショートカットキーF12で開ける開発者ツールが備わっています。この開発者ツールのコンソールからjQuery付javascriptとほぼ同じ言語でDOMの操作ができます。
 要素を対象にとる

$(selecter),$$(selecter)

 document.querySelector(),document.queryAllSelector()と同じです。jQueryのセレクタと同じ記法です。どちらも対象が一つのみでも配列扱いをするので操作に注意がいります。要素の展開から属性なりイベントなりの色々が読み取れます。

*.children,*.firstChild,*.parentNode,...

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っている要素参照操作が備わっているようです。

*.innerHTML,*.outerHTML

 連鎖して何かを呼び出せませんが一括操作に有用です。
DOMを操作する

*.append(),*.removeChild(),insertBefore(),…

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っているDOM操作が備わっているようです。
便利

* = *,if,while,for

 変数を持つことも分岐、繰り返しを行うこともできます。ほぼ対話的なjavascriptです。

clear()

 画面をきれいにします。

コンソール上のDOMの階層要素を右クリック→Expand recursivelyを実行

 DOMの要素を再帰的に展開、要は全部展開します。コンソール上の参照されたDOM要素はElementPanelのDOM要素に近い機能を備えています。

コンソール上の適当な隙間で右クリック→Save as...

 コンソール上の操作のログを保存します。直接Command Historyを開く命令がみあたらないのでこれで代用です。正直手間な感じはします。

  • この記事いいね! (0)
村上 著者:村上

【CSS】要素の幅や高さを指定する単位vmin、vmaxとは

今回は、以前 vw、vhを紹介した記事では割愛した vmaxvmin について。
実際に使う機会があったのでまとめました。

ちなみに、以前の記事はこちらから。

【CSS】要素の幅や高さを指定する単位vw、vhとは
https://cpoint-lab.co.jp/article/201804/【css】要素の幅や高さを指定する単位vw、vhとは/

 

さて、具体的に説明すると下記のとおりです。

vmin (viewport minimum) ウィンドウの幅と高さのうち、値が小さい方に対する割合
vmax (viewport max) ウィンドウの幅と高さのうち、値が大きい方に対する割合

具体的には下記のように記述します。

div {
    width: 30vmax;
    height: 30vmax;
}

上記のように指定すると、PCなどの横長のブラウザで見た場合、ウィンドウの縦横の長い方の長さに合わせて、DIV要素のサイズが変化します。
なお、今回は 30vmax なので、ウィンドウサイズの長い方の長さの 30% のサイズで表示されます。

これを使えば、例えばスマートフォンで、正方形の要素を2つ並べたい!というときに使えます。
意外と高さの指定って難しいので、今後重宝しそうです。

 

ということで、要素の幅・高さを指定する単位 vmin、vmax の使い方でした。
是非ご参考にしてください。

  • この記事いいね! (0)
takahashi 著者:takahashi

GDPRの影響でWhois情報公開が停止する可能性

EUのGDPR(EU一般データ保護規則)の影響ががついにWhoisデータベースにまで及びました。

ドメイン所有者の連絡先などが含まれる「WHOIS」データがGDPR発効の影響で一時的に非公開になる可能性 – Gigazine

GDPRはEU圏内に住む人々の個人情報について、所定の許可なく公開することを禁止する法律で、特徴的なのは域外の企業や事業者に対しても適用される点。
具体的には、一人でもEU圏内の人の個人情報を登録しているサービスでは、GDPRに則らないと制裁をうけるということです。

発効を前に、対象になった企業や団体が対応に追われている状況ですが、最近のニュースで特に大きな影響を受けるだろうとされるサービスが浮上してきました。
それが、世界中のgTLDドメインを管理するICANNによるWhoisデータベースです。

ICANNでは、Whoisにドメイン取得者の情報を登録することを義務付けており、従わない場合はドメインの登録を停止、取り消される規約になっていました。
この情報の中に住所や取得者の氏名などの個人情報が含まれています。
gTLDは世界的に使われているドメインなので、当然EU圏内の人もドメインを登録しているはずです。結果的にこのGDPRの影響をもろに受ける形になりなり、ICANNはWhoisの制度を見直さざるを得なくなりました。

現在、ICANNでは議論がされているようですが、答えが出るのに相当な時間がかかるため、GDPR発効までに対応版Whoisを構築することは難しく、暫定的な対応としてWhoisデータベースの公開制限や停止が行われる可能性が浮上しているようです。

ICANNのWhois情報公開の意義としてドメインの不正利用や犯罪の防止の目的もあり、今回のICANNの対応に対して、海賊版コンテンツに悩む各国の著作権団体からは抗議も上がっているようです。

GDPR規制によるWHOIS情報の制限に権利者団体が反発「海賊版の取り締まりを難しくする」 – P2Pとかその辺のお話R

ここからは個人的な意見ですが、僕はむしろ今回のGDPRによって、Whois情報が非公開化することは、”インターネットの個人利用”という観点からよかったのではないかなと考えています。

というのも、Whoisデータベースに氏名や住所などを載せないといけないのは企業だけではなく、ドメイン取得するすべての利用者が対象になります。
勿論ドメインを取得するのは法人だけとは限らないので、個人でドメインを取得する場合は自宅の住所なども公開する必要があるのです。

こんな状況でドメインを登録してしまうと、ドメインから一般の人に自分の住所が特定されてしまったりなどかなりリスクが高く、かといって自分のドメインを取得できない場合、個人的にサーバやサイトを建てる際にかなり制限を受けてしまう(SSL証明書が取得できないなど)の問題があり、”個人のサービスやサイトを公開するのに自分の自宅の住所をさらさないといけない”状態になっていました。
最近ではパブリッククラウドの普及などで、個人でも普通にサーバーを持つ時代になっていますし、この”法人を前提”としたWhoisの仕組みについて、個人的にかなり疑問に思っていました。
また、対応策としてレジストラによってはWhois代行公開サービスを提供している場合もありますが、ICANNの方針的に、いつ禁止されるかもわからない状況でした。

今回のGDPRの影響で結果的にWhoisの”だれでも情報にアクセスできる”状況の見直しが必要になったことで、Whoisの情報公開方法が見直され、”個人ユーザーにやさしい”Whoisの仕組みになることを期待したいと思います。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】ビルド時の「[プロジェクト名] has conflicting provisioning settings.」エラーの対処法

今回はXcodeでアプリをビルドしようとしたときに遭遇したエラーについて。
長文エラーって、英語が苦手な身からしては読む気すら失せるので、それだけで億劫かつ憂鬱になります。

エラー全文はこちらから。

[プロジェクト名] has conflicting provisioning settings. [プロジェクト名] is automatically signed for development, but a conflicting code signing identity iPhone Distribution has been manually specified. Set the code signing identity value to “iPhone Developer” in the build settings editor, or switch to manual signing in the project editor.

ざっくり翻訳したところ、プロビジョニング設定が競合していることが問題とのことでした。
本来であれば、自動的に署名が行われている箇所に、手動で異なる設定が指定されているのだとか。
が、このあたりの設定を変更した記憶がないので、心当たりがありません…。

今回参考にさせていただいた記事はこちら。

iOS – iOSアプリ申請時のArchiveでconflicting provisioning settingsエラーが出る(56698)|Teratail
https://teratail.com/questions/56698

 

肝心な対処法ですが…「Automactically manage signing」のチェックを一度外し、再度チェックするだけ。
下の画像の下あたりにあるチェックボックスがそれです。

あとは、通常通りビルドを行ったところ、なんの問題もなくビルドが完了し、実機・Simulator のどちらでもアプリを実行することができました。
エラー文が長いので、最初に遭遇した時は身構えましたが、対処方法としてはなんてことはなかったですね。
チェックの解除・設定をおこなうと、プロビジョニングの設定がリセットされるので、今回のエラーが解消されるとのことでした。

以前も書いた気がしますが、とりあえず原因がわからないエラーに遭遇したら、丸々コピーして検索しましょう。

  • この記事いいね! (0)
著者:杉浦

グラフ理論のさわり

wikipediaから引用

グラフ理論(グラフりろん、: graph theory)は、ノード節点[英 1]頂点[英 2])の集合とエッジ[英 3])の集合で構成されるグラフ[英 4]に関する数学の理論である。グラフ (データ構造) などの応用がある。

 下図のまる数字がノード、直線がエッジです。

 グラフの考えを用いることで様々なものの関連性を表すことができます。例えば、以前紹介したRegexperの正規表現の表現です。

 これは分岐、ループ、グループ、特殊文字、複数候補、のようなものを区切りにノードを作っています。ソースコードもif、for、while、関数などを目印にノードとすることでグラフによって表すことができます。ソースコードからできあがったグラフの複雑さを目安にコードレビューを行うこともできます。また、データ構造でもグラフ理論は使われており、特に階層的なデータ構造は木構造として知られています。ファイルシステム、HTMLなどはよく見るところにある木構造のデータ構造を持つシステムです。データ構造から想像できる木が非常に複雑であったり、歪であったりすると大体可読性がまずいことになっています。
 通信ネットワーク、交通網の様な複雑にならざるをえないものもグラフ構造ならば秩序だって考えることができます。複雑すぎるものは隣接行列を用いて考えたりします。下が最初のグラフを表す隣接行列です。

 0ならば隣接しておらず、1ならば隣接していることを示します。この行列は隣接行列と名がついていますがノード間の接続を表す行列と考えた方が思い浮かべやすいです。というのも(1,2)=1,(2,1)=0のようにすると一方通行を表すことができ、01のみならず任意の値で多重路や距離の様な重みを設定することもできるからです。隣接行列の操作によってグラフの様々な情報を得ることができます。例えば、01で表されたn乗された隣接行列の(i,j)成分はiからjへの長さnの経路の数になります。

  • この記事いいね! (0)