月別アーカイブ 2月 2019

takahashi 著者:takahashi

Play Music Desktop Playerに頻繁にクラッシュする不具合が発生。現在修正済みで公開待ち状態。

以前ご紹介した Google Play Music Desktop Player ですが、Ver.4.6.1時点で再生中にアプリがフリーズしてしまう不具合が発生しているようです。

As of 8/02/2019 GPMDP will crash on certain songs #3483 – GitHub

上記のIssueによると、lyricsfreak.com への接続で問題が発生していたとのこと。

なお、既に問題が修正されたバージョンがコミットされていますが、反映に時間がかかるようで、まだ公式のダウンロードサイトには公開されていません。

Issueの中で、修正済みコードから有志の方がビルドしたバージョンが公開されていたため、こちらを入手してインストールしたところ、とりあえずクラッシュする問題は出なくなったようです。

同じ症状で悩んでいる方は、自己責任の上、上記の非公式ビルドを試してみるか、正式版のリリースを待ちましょう。

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

HTMLとCSSの重ね合わせコンテキスト

 重ね合わせコンテキストはstacking contextの訳でHTMLの描画のZ軸(奥行)に関する概念です。positionやz-indexによってスタッキングコンテキストが定義され、これに沿ってHTML要素の重なり方が決定されます。
 重ね合わせコンテキスト – CSS: カスケーディングスタイルシート | MDN
 スタッキングコンテキストは木の様な階層構造になっており、親のノードの要素の上に子のノードの要素が描画されます。スタッキングコンテキストは次のルールに従います。

  • 重ね合わせコンテキストは他の重ね合わせコンテキストに含めることができ、その結果重ね合わせコンテキストの階層構造ができます。
  • 重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。
  • 重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。

重ね合わせコンテキスト – CSS: カスケーディングスタイルシート | MDNより引用

 この親の上に子を描画するルールはけっこう強力で、直感的でないz-indexの動作を引き起こします。

 z-index:4の要素の上にz-index:3やz-index:1の要素が描画され、z-index:5の要素がz-index:6を差し置いて最前面に描画されています。これが親の上に子のルールによるものです。z-indexもまた階層構造になっており、描画順はz-index-levelの記述の様に親子を考慮した辞書順で考えるのがわかりやすいです。地図をwebページ上で描画するLeafletなどはこれを特に利用しています。下図の様にとんでもない勢いで位置の上下に合わせてz-indexを変更していますが、地図ノードコンテキストの上でのみのz-index操作なのでバグの原因になることは滅多にないです。

 重ね合わせコンテキストを生の開発者ツールで読み取るのは正直しんどいです。(見方を知らないだけかもしれないけど)Chromeの拡張にはこれを開発者ツールに追記するものがあります。
z-context – Chrome ウェブストア
 z-contextは下図の様に開発者ツールに、この要素はどのコンテキストに属しているか、コンテキストを作るか、親コンテキストは何か、z-index何番であるかを示します。

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

【css】モバイル端末でみた時の文字サイズが違う

今回は、端末に対応していないサイトをスマホなどのモバイル端末で見るときの挙動とその解決法について書いていきます。

通常のwebサイト制作においては、text-sizeでinputなどの文字の大きさを決めていると思われます。

ですが、通常の状態のtext-sizeだと、下記で紹介する-webkit-text-size-adjustの効果によって縦にした時と横にした時とで文字サイズが異な

る時があり、このズレを放置することでページ全体のレイアウトが崩壊してユーザーを混乱させてしまう恐れがあります。

-webkit-text-size-adjustとは、ページに合わせたテキストの大きさを制御しているプロパティです。

通常、モバイル端末に対応していないwebサイトをスマホなどの端末で見ると、ブラウザはレイアウトを大きめの画面に合わせた状態

で表示させます。-webkit-text-size-adjustは、デフォルトの状態でauto(動いている)状態になっており、このままでは一部分の画面しか

表示してくれなかったりとユーザーにとってもものすごく見づらい画面になってしまいます。

ですが、この-webkit-text-size-adjustの値を100%にすることで使うことで上記の効果を無効化し、元の文字の大きさで表示させることが

できます。

めちゃくちゃシンプルですがこんな感じです。

</pre>
<style>

body{

-webkit-text-size-adjust

}

</style>
<pre>

端末で見られることを想定しているサイトの場合、主にbodyの中に入れてビューの変形を免れることができます。
noneでも設定できるかと思っていましたが、chromeやsafariで見ると文字の配置は変わっているのに

文字サイズだけが変わらず小さいままというとにかく扱いにくい状態になってしまうのでこれは非推奨でした。

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

【Cordova】外部サイトをアプリ内ブラウザで表示できるプラグイン「cordova-plugin-inappbrowser」

昨年末にも似たような記事を投稿しましたが、今回はプラグインを使って外部サイトアプリ内ブラウザで表示する方法について。
まだ iOS でしか動作検証できていませんが、結構良い感じに動作したので、Android でも確認して、採用するか決めたいと思います。

使用したプラグインは、「cordova-plugin-inappbrowser」です。
GitHubはこちらから。

GitHub – apache/cordova-plugin-inappbrowser: Apache Cordova Plugin inappbrowser
https://github.com/apache/cordova-plugin-inappbrowser

ただ、今回は下記のサイトの方が参考になりました。

InAppBrowser プラグイン|Monaca Docs
https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/

モナカのドキュメントのページですが、プラグインなどは同じものを使えるので問題なし。

 

実装方法ですが、まずは下記のコマンドでプラグインをインストールします。

cordova plugin add cordova-plugin-inappbrowser

インストールが完了したら、あとは下記の関数を呼び出して、サイトを開くだけ。

const url = '[開きたいページのURL]';
cordova.InAppBrowser.open(url, '_blank', 'location=no');

実際の画面はこんな感じ。

私のコードでは、一連の処理を抜粋して書くとこうなります。
ちなみに、React を使用しておりますので、悪しからず。

openSite(url) {
  cordova.InAppBrowser.open(url, '_blank', 'location=no');
}
render() {
  const url = '[開きたいページのURL]';
  return (
    <main>
      <a onClick={() => this.openLink(url)}>ページを開く</a>
    </main>
  );
}

なお、cordova.InAppBrowser.open() には引数がいくつかあります。
個人的に指定しておいたほうがいいと思うのは、第3引数の、location=no ですね。
こちらはロケーションバーの表示/非表示の設定を行えます。
で、デフォルト値が Yes なのですが…正直、格好悪い…!
そのため、申し訳ないのですが、速攻非表示にさせてもらいました…。
他にも、下の「完了」の文言を変えたり、新規のウィンドウを開く際に、キャッシュやCookie を削除することもできるらしいです。
その辺りは、状況に応じて設定してください。
なお、複数設定する場合、プロパティをスペースなしのカンマ区切りで指定してください。

 

以上、Cordova アプリで外部サイトをアプリ内ブラウザで表示する方法でした。

最後に、以前投稿した記事についてもご紹介しておきます。

【Cordova】外部サイトをアプリ内ブラウザで表示する方法
https://cpoint-lab.co.jp/article/201811/【cordova】外部サイトをアプリ内ブラウザで表示する/

こちらは Whitelist を利用してアプリ内ブラウザを開く方法です。
同じように外部サイトを開くことはできるのですが、前のページに戻れなかったので、この方法は却下しました。

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

人間には聞こえない音コマンド

Ok Google や、Alexa に対して音声で命令をしていると思いますが、音に別のコマンドを潜ませることで、音声アシスタントが聞き取ってしまうらしいです。

人間には聞き取れない音を聞き取る音声アシスタント

カリフォルニア大学バークレー校のエキスパート(英語記事)は、別の原理を利用しました。他の音声の断片に音声コマンドを潜ませて、Mozillaの音声認識システムであるDeep Speechを欺くことにしたのです。人間の耳では、加工された音とオリジナルとの違いはほとんどわかりませんが、Deep Speechは隠しコマンドを認識できるのです。
調査チームのWebサイトでこれらの音を聞いてみてください(英語記事)。最初の例では、「Without the data set the article is useless(データセットがなければこの論説は役に立たない)」というフレーズに、「Okay Google, browse to evil.com.(OK、グーグル。evil.comを開いて)」という、Webサイトを開くためのコマンドが隠されています。2つ目の例では、バッハのチェロ組曲に、「Speech can be embedded in music(音声を音楽に埋め込みできる)」というフレーズが追加されています。

https://blog.kaspersky.co.jp/ultrasound-attacks/22339/

超音波だけでなく、他の音声の断片に音声コマンドを潜ませることもできる様です。

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

Windows10のWindows Updateの更新チャンネルが統合されるらしい。

現行のWindows10のWindows Updateの詳細設定画面に、下記の項目があります。

どうやらこの設定が、Windows10の次期リリース Ver.1903 で削除されるようです。

「Windows 10 バージョン 1903」では“Windows Update”のSAC-T/SACの切り替えUIが廃止 – 窓の杜

現状、この項目では下の画像のように2種類のチャネルから選択ができるようになっています。

・半期チャネル(対象指定)

・半期チャネル

正直この二つの違いは何なのか自分もよくわかってなかったのですが、どうやら半期チャネル(対象限定)は、”この機種なら正常に動作するだろう”と判断されたものから順次配信されるチャネルで、半期チャネルは前者のような配信制限が完全に解除されたらアップデートが配信される、というように分かれています。

なので、”アップデートでPCが動かなくなったら困る…!”という人は、”半期チャネル”を選択しておくことで、比較的問題が取り除かれたあとでアップデートを受け取ることができる、というわけです。

ただ、これとは別に”アップデートが適用されてから~日後に適用する”という設定もあり、分かりづらいというのもあったためか、 1903からは、全端末への配信のみになるようです。

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

【CSS】z-indexプロパティが効かない時の対処法【未解決】

タイトルにも明記しましたが、こちらは未解決です。
有効な対処法を発見したら、改めてまとめます…。

 

今回は、要素の重なり順を指定するための z-index プロパティについてです。
Webページのある要素を、最前面に配置しようとしたところ…何故か z-index が有効にならず、他の要素のしたに潜り込んでしまいます。
で、その対処法について検索したところ、一番上に表示されたのがこちらのページです。

z-indexの使い方:CSSで重なり順を指定する
https://saruwakakun.com/html-css/basic/z-index

こちらによると、z-index は position プロパティに static 以外が定義されている必要があるとのこと。
position プロパティのデフォルト値は static なので、relative や absolute など、なにかしらの値を定義する必要があります。
現在の要素の位置を変更したくない場合は、relative を指定しましょう。

が、z-index を指定した要素には、もともと position: absolute; が定義されており…こちらは関係なかったようです。
他の要素の CSS が関係しているようなので、もう少し調べてみたいと思います。

 

以上、CSS の z-index が効かなかった時の対処法でした。
私の環境では解決しませんでしたが…とりあえず、position プロパティを指定しているかを確認しましょう。

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

【javaScript】今更WebAudioAPIを試す

去年の話ですが、お遊びで動物の鳴き声を使った目覚ましアプリを作ろうとしたときにWeb Audio APIというプラグインを知りました。

javascriptにおける音声を再生または取り込むための機能は、フラッシュやhtml5対応の</audio>タグがその役割を担っています。

両方とも音声の再生をする分には困ることはないのですがこれらのオブジェクトはいかんせん制約が多く、現在の速さが求められる

アプリ開発とは相性が悪いです。なのでこれからはWeb Audio APIを使ってねという記事を目にしました。

Web Audio APIとは、webアプリケーション向けに開発された、音声ファイルの管理に特化したjavaScriptAPIです。

コード量も少ないので、複雑な処理でなければ初心者のかたでも扱うことができます。

ざっくりとですが、コンテキストで音声の再生を管理するコードがこちらです。

var context;
window.addEventListener('load',init,false);
function init(){
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  context = new AudioContext();
}
  catch(e){
  alert('web Audio API is not supported in this browser');
  }
}
[/javascipt]

initで初期化させてスタンバイさせておけば、後はcontextで読み込んでくれるのでここだけ抑えておけば基本は大丈夫だと

思います。iphoneでは未検証なので断言はできないですが、他の従来のプラグインも素直に動いてくれているのでAPIサポート外

でもない限りこっちでも問題ないのではないでしょうか。

後はこれをreactとかのライブラリに入れるとちゃんと動くのかなとか考えることもありますが、現状javaScriptで音声を

扱いたいなと思ったらこのwebAudioAPIで間違いないと思うので、もしよろしければ参考に・・・

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

コーディング原則の一つSLAP

Single Level of Abstraction (SLA) [Principles Wiki]
 SLAPとはSingle Level of Abstraction Principleの略で直訳して単一レベルの抽象化原則です。上記リンクはSLAですが、SLAPの方が検索結果が多いです。この原則をもっとかみ砕いていうと、プログラムの構造化の段階を揃えましょう、となります。これが為されていると読みやすくまとまったコードが出来ます。例えば次のようなコードです。

function 高水準(){// レベル1の目次
  中水準1();
  中水準2();
}
function 中水準1(){// レベル2の目次-1
  低水準1();
  低水準2();
}
function 低水準1(){// 本文内容
  // 処理
}
function 低水準2(){// 本文内容
  // 処理
}
function 中水準2(){// レベル2の目次-2
  低水準3();
}
function 低水準3(){// 本文内容
  // 処理
}

上田勲. プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則 (Kindle の位置No.946-956). 株式会社秀和システム. Kindle 版.

 例は書籍の内容に沿って処理を行うコードになっています。書籍で言う目次、章、節がそれぞれ高水準、中水準、低水準に従う形です。こうなっていると、どこで何のために何をしているか分かりやすくなります。

高水準─┬─中水準1─┬─低水準1
        │           └─低水準2
        └─中水準2───低水準3

 少々極端ですが、もし共通する部分をまとめて扱うことを優先し次の様になっていた場合、どこからどこまでが何のための処理なのかわかりにくくなります。

// 低水準1,2,3で使う変数の宣言
// 低水準1と3の共通前処理
// 低水準1の処理
// 低水準2の処理
// 低水準2と3の共通処理
// 低水準3の処理
// 低水準1と3の共通後処理

 最初の例では本の内容をコードに落とし込むため幾分か楽に構造化レベルを整えられましたが、実際は処理の長さの差がまちまちでなかなかまとめるのが難しくSLAPを完全に守ることができないこともあります。そういった時、SLAPの上で最低限守るべきなのは呼び出し時のレベルの統一です。次の様にすると何もしない時よりか幾分楽に読めるようになります。

function 高水準(){// 目次
  中水準1();
  中水準2();
  中水準3();
}
function 中水準1(){// 章-1
  低水準1();
  低水準2();
}
function 低水準1(){// 節-1
  極低水準1();
  極低水準2();
  極低水準3();
}
function 極低水準1(){// 本文内容
  // 処理
}
function 極低水準2(){// 本文内容
  // 処理
}
function 極低水準3(){// 本文内容
  // 処理
}
function 中水準2(){// 章-2 本文内容
  // 処理
}
function 中水準3(){// 章-3
  低水準3();
}
function 低水準3(){// 節-2 本文内容
  // 処理
}

 上記例が読み難い原因はいずれも同レベルfunctionで宣言されているためです。例えばJavaScriptの関数内関数でレベル分けをするならば次の様になります。

function 高水準(){// 目次
  中水準1();
  中水準2();
  中水準3();
}

function 中水準1(){// 章-1
  低水準1();
  低水準2();
  function 低水準1(){// 節-1
    極低水準1();
    極低水準2();
    極低水準3();
    function 極低水準1(){// 本文内容
      // 処理
    }
    function 極低水準2(){// 本文内容
      // 処理
    }
    function 極低水準3(){// 本文内容
      // 処理
    }
  }
  function 低水準2(){// 節-2 本文内容
    // 処理
  }
}

function 中水準2(){// 章-2 本文内容
  // 処理
}

function 中水準3(){// 章-3
  低水準3();
  function 低水準3(){// 節-3 本文内容
    // 処理
  }
}

 読みやすくなりました。この書き方そのままではネストが深くなってしまいますが実際にはフォルダ、ファイル、クラス、プロパティ、アクセス修飾子などによる分類も用いて構造化を行うことで、深いネストの回避とレベルの統一された階層化を実現します。

高水準─┬─中水準1─┬─低水準1─┬─極低水準1
        │           │           ├─極低水準2
        │           │           └─極低水準3
        │           └─低水準2
        ├─中水準2
        └─中水準3───低水準3
  • この記事いいね! (0)
著者:ym

SNIフィールドと遮断

https で暗号化通信をすることで、遮断を逃れられていたのですが、便利な SNI のおかげで逆に遮断できる状況になってしまった形。

韓国でSNIフィールドを使った特定サイトの接続遮断が始まる

https://it.srad.jp/story/19/02/13/0735240/

韓国でSNIフィールドを使った遮断が始まっている様です。

DNS over HTTPS は、SNI 部分とは関係が無いので、もっと前段階ですが、SNIフィールド遮断に対しては Encrypted SNI 。

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