カテゴリーアーカイブ 未分類

takahashi 著者:takahashi

Google Chromeがv67からPWAに対応。Twitterなどの対応サイトで利用可能に。

最近、Windows10 AprilUpdateでMicrosoft EdgeベースのPWAに対応したニュースがありましたが、Google Chromeも、Chrome67からPWAに対応したようです。

Google Chrome 67安定版リリース、「サイト分離」機能やセンサー用API「Generic Sensor API」を搭載 – Gigazine

Twitter LiteなどのPWA対応サイトをChromeブラウザ経由でも、アプリとしてインストールしておくことが可能となりました。

ただ、現在はまだデフォルトで無効になっているようですので、
chrome://flags
から有効にする必要があります。
chrome://flagsにアクセスしたら、検索バーに”PWA”と入れます。

Desktop PWAs をDefautからEnableに変更します。

再起動を求められるので、Chromeを再起動を行えば、PWAが有効になります。

Twitterの公式アプリが自分の環境で動かない、アプリがない、という方は是非試してみてはいががでしょうか。

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

【アプリ】生活音やメロディーを聞きながら眠れる「Relax Melodies」

今日は技術ネタではなく、最近よく使っている「Relax Melodies」というアプリについて。
こちらのアプリは、雨の音や滝の音、もしくはオルゴールの曲などを再生できるアプリです。

アプリのジャンルとしては、睡眠・ヨガにあたるみたいです。

アプリのインストールはこちらから。

Android:https://play.google.com/store/apps/details?id=ipnossoft.rma.free&hl=ja
iOS:https://itunes.apple.com/jp/app/relax-melodies-sleep-sounds/id314498713?mt=8

 

一部有料のものもありますが、50以上のサウンドが用意されており、それを好きな組み合わせ&お好みの音量でミックスして再生することができます。

また、気に入った組み合わせについては下の画像のように保存することもできます。

最近は、オルゴール調の「ブラームスの子守歌」が気に入っています。
単調なメロディーなので、聞いているとウトウトと眠くなってきます。

さらにタイマー機能も付いているので、設定しておけば、朝までずっと音楽が流れてしまうこともありません。

私の場合はいつも30分で設定しています。
よっぽどのことがない限りは、聞き終わる前に眠れます。

 

ということで、快適な入眠にぴったりなアプリ「Relax Melodies」の紹介でした。
静か過ぎると眠れない!という方や、リラックスできる音楽を聴きながら眠りたいという方は、ぜひ試してみてください。
しかし、不眠が続く場合は、アプリではなく、早急にお医者様へかかってください。

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

ブラウザ対応状況参照サイトCan I useの紹介

 Can I use… Support tables for HTML5, CSS3, etc
 このサイトはIE、Chrome、Firefox等の各ブラウザがCSS、HTML5、JavaScript等の各技術をサポートしているかどうかを容易に調べることのできるサイトです。
 使い方はCan I use ____?とある検索ボックスに調べたい要素を打ち込むだけ。画面に出てきたブラウザとバージョンが示された箱の色が緑なら対応、赤なら非対応を示します。Settingでは表示されるブラウザの最小シェアや地域におけるシェア、特定のブラウザ、技術のカテゴリ、などの表示非表示などを設定することができます。

 一度に一文字列しか検索できない、大きな検索結果を一つずつ表示する、といった形のためあるページ中に使用されている技術を網羅する、の様な使い方には手間がかかるのが玉に瑕ですが、それを除いても便利です。また、検索結果の各技術にはresourcesの名で仕様、リファレンスなどのリンクがあり詳しく調べたい際に有用です。

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

デザインツールAdobeXDの一部機能が無料化! デザインを作るだけならだれでも利用可能に

正式版となって以来、Adobe CC の一部として有料となっていたAdobe XD(Experience Design) CC ですが、先日のアナウンスで基本機能が無料化されたことがわかりました。

Adobe XD 5月アップデートリリース!無料プランが新たに登場! – Adobe Creative Station

最初のころはAdobe XDのベータテスト版として、フル機能が無料公開されていましたが、2017年10月に正式版が公開され、有料化となりました。
Adobe XDの単体プランは 1,180円/月 という形になっており、そこそこのお値段でした。

ただ、そのほかのツールもいろいろ探したのですが、操作性がイマイチであったり、機能が少なかったり、日本語版がなかったりなど、かなり扱いづらい印象でした。
操作性や機能面で完成度が高い上に動作も軽く、日本語に対応している数少ないプロトタイピングツールだったので、基本機能が無料で利用できるのはかなりありがたいですね。

有料版との違いは、一度に共有できるプロトタイプが1つに限定されるとのことなので、一度に複数のプロトタイプを共有する場合は、有料プランへの加入が必要になります。

スタータープランでは、作成できるXDドキュメントの数に制限はありません。公開のためのアセットのエクスポートやエクスペリエンスの動作を共有するための動画作成も可能です。共有機能については、一度に共有可能なプロトタイプおよびデザインスペックは1つに限定されています。この制限は、プランをアップグレードすることで解除できます。XD単体プランまたはCreative Cloudコンプリートプランのメンバーには、この制限はありません。

何かサービスやアプリを作る上で、UIの設計は避けては通れない工程です。
逆に、開発前にUIの設計をしっかりやっておくと、後々開発がしやすくなることも多いと思います。

Webやアプリの開発を行っている方は、是非こういったUIプロトタイピングツールを使ってみてはいかがでしょうか?

Adobe XD – Adobe

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

モンティホール問題

 モンティホール問題は直感と実際の確率が違うと感じやすい問題として知られている問題です。wikipediaから問題文引用

「プレーヤーの前に閉まった3つのドアがあって、1つのドアの後ろには景品の新車が、2つのドアの後ろには、はずれを意味するヤギがいる。プレーヤーは新車のドアを当てると新車がもらえる。プレーヤーが1つのドアを選択した後、司会のモンティが残りのドアのうちヤギがいるドアを開けてヤギを見せる。
ここでプレーヤーは、最初に選んだドアを、残っている開けられていないドアに変更してもよいと言われる。プレーヤーはドアを変更すべきだろうか?」

 正答は「変更した方がよい」です。しかし、私含め多くの人は直感的に変更してもしなくても変わらないと思います。
 この問題を納得しやすく説明する方法は、起きうるパターンを全て書きだしたり、はずれの数とはずれを開ける数を極端に増やして考えてみる、といったものをはじめとしていくつもあります。私は、「ヤギがいるドアを開けてヤギを見せる。」というくだりを「あなたが決めたドアでも正解の宝箱でもないドアを開けて~」と言い換える説明がしっくりきました。

  • この記事いいね! (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)
著者:杉浦

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)
著者:杉浦

グラフ理論のさわり

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)
著者:ym

docker と Hyper-V

Bash on Ubuntu on Windows が利用できるようになり、Debianなどの Linux ディストリビューションも利用できる様になりました。

であれば、docker for Windows も Hyper-V じゃなくて、ネイティブで動くようになるのだろうか?

docker cli インタフェースは直接コマンドプロンプトで利用できるから直接利用している様な感じがするのですけどね。ただ、Hyper-V を動かしている時点で重たい、それに、さらに MobyLinuxVM 。確かに便利ではあるけどあと一歩。

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

電話回線移設に伴ってISDNデジタル通信モードが終了へ

NTT東西の電話網が、従来のものから”IP網”へ移行するに伴って、ISDNのデジタル通信モードの提供が終了になるようです。

ISDNのディジタル通信モードが2020年度にも終了へ、企業間の自動発注システムに大きな影響? JISAが対策を呼び掛け – Internet Watch

自分はギリギリADSL世代なので、ISDNは使ったことは全くないのですが、企業や一部のシステムではいまだに使われているらしく、そういった場合はあらかじめ移行の準備をしておく必要があるらしいです。

しかしながら、NTTの電話回線自体がIP網になるなんで、時代の流れを感じますね。

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