月別アーカイブ 5月 2018

著者:杉浦

javascriptのDOM操作の高速化に使える機能:DocumentFragment

 これはいくらかjavascriptを知っている人向けの記事で、javascriptの機能の一つDocumentFragmentの紹介です。
 DocumentFragmentはDOMツリーとほぼ同じ機能を持つ独立したノード、小型のdocumentの様なものを定義するインターフェースです。ルートであるdocumentのDOMツリーを操作した場合、レンダリングがしょっちゅう働きますが、DocumentFragmentに従って作成されたDOMツリー同然のノードを操作した場合はレンダリングが全く働きません。このためDocumentFragmentを用いてDOMツリーに連結する予定の木を作成、作成された木を連結、とすることで比較的高速にDOMツリーを操作できます。。
 DOMツリーとはHTMLドキュメントなどを木構造オブジェクトとして扱う際の木のことです。DOMツリー中のノードが削除、変更されたり、新たにノードが追加された場合、レンダリングが行われる場合があります。DOMの操作は重い動作である、という意見、記事がいくつも見られる理由の一つはおそらくこれでしょう。もっとも最近はブラウザも賢くなりレンダリング回数を少なくしようとしていますが、警戒するに越したことはないです。IEにおいてfor文中でappendChildを回す部分のあったプログラムを走らせたら、レンダリングの実行回数がえらいことになっていました。
 DocumentFragment – Web API インターフェイス | MDN
 使い方
var df = document.createDocumentFragment();
 このdfを好き勝手いじれます。dfをどこぞに連結する場合、DocumentFragmentの頂点ノードは削除され、一つの木として自然な形になります。
 レンダリングなどのブラウザの内部について述べられた記事:ブラウザのしくみ: 最新ウェブブラウザの内部構造 – HTML5 Rocks

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

空き容量8GBあってもWindows 10 April 2018 Update が出来ない

別のPC側も Windows 10 April 2018 Update を実施してみました!が、しかし。

0xc190020e エラーでアップグレード出来ず。残念。

8 GB ギリギリ空いているけど、ギリギリではアップグレード出来なかった。
クリーンアッププログラムも当然実行しているし、インストールしたソフトを消さないと、これ以上空き容量を作る事はできそうに無いな。

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

Firefox ESR 60 rel.

Firefox の ESR 版がいよいよ ESR 60 になるようです。

もちろん普段仕事で使用しているバージョンは ESR ではない Firefox 60 64ビット 版ですが、業務では銀行系の保守バージョンやクライアント証明書の関係があるので、Firefox ESR のしかも 32bit バージョンも Firefox のプロファイルを分けて使用しています。今、銀行のページを見てみましたが ESR 60 には対応していない様なので、おとなしくバージョンアップは止めときました。

2018/5/9のリリースから8/21までは検証期間になるようです。

いずれにしても入替えが必要となるので、クライアント証明書の秘密鍵の取り出しとかバックアップの準備もしなければ。

 

 

 

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

Microsoft edgeはループバックアドレス(localhostなど)へのアクセスを制限する

これは非常に困る…

PC内に仮想マシンを建て、仮想NATでホストOSからアクセスできるようにセットアップしてあるのですが、他のブラウザでは問題なくアクセスできているこのアドレスに対して、何故かMicrosoft edgeからアクセスできません。

いろいろ調べたところ、どうやらedgeはデフォルトでループバックアドレスへのアクセスをブロックしているらしいです。
アクセスを有効化するためにはedgeの開発者オプションからアクセスを有効にする必要があるとのこと。

アドレスバーに
about:flags
と入力すると、開発者向けの隠しオプションが表示されます。

赤枠内の項目にチェックを入れ、一度すべてのedgeのウインドウを閉じた後再度起動します。

この状態でループバックアドレスにアクセスできないのであれば、インターネットオプションからループバックアドレスを”信頼済みサイト”や”イントラネットネット”へ追加します。

これで閲覧できるようになるはずとのことだったのですが、自分の環境ではここまでしてもダメでした。

正直なところ、localhostへのアクセスによってマルウェアに感染したなんて話は聞いたことないですし、セキュリティにかなり厳しいChromeでさえ標準でlocalhostやループバックアドレスへのアクセスはデフォルトで許可されています。

にもかかわらずなぜmicrosoftはedgeでそんな制限をかけるのか…まったくもって理解できません。
少なくとも、現状のままである限り、普段使いとしても開発環境としてもedgeを使メインで使うようになる日はやってこないでしょう。

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

【JavaScript】jQueryなしでappend()と同じことを実行する

DOM操作をするときに jQuery の append() を使うことが多いのですが、場合によっては jQuery が使用できないことがあるかと思います。
なので、今回はタイトル通り、jQueryなしで append() と同じことを行う方法についてです。

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

innerHTML より insertAdjacentHTML を使う – Qiita
https://qiita.com/amamamaou/items/624c22adec32515e863b

 

実際のコードはこちら。
今回使うメソッドは、insertAdjacentHTML() というものです。

<div id="parent">
    <p>p要素 その1</p>
</div>
// id=parendの子要素の最下部に要素を追加 append()
var element = document.getElementById("parent");
element.insertAdjacentHTML("beforeend", "<p>p要素 その2</p>");

上記のコードを実行すると、ID が parent の要素の子要素の一番下に、指定したp要素が追加されます。
動作としては、jQuery の append() と全く一緒です。
ちなみに、insertAdjacentHTML() メソッドの第一引数を変更することで、append() 以外の動作を行わせることができます。

簡単に表でまとめてみました。

jQuery insertAdjacentHTML()
append() “beforeend”
prepend() “afterbegin”
before() “beforebegin”
after() “afterend”

jQuery で行えるDOM要素の挿入は、こちらの方法でも問題なくできるようです。

なお、もしHTML文字列ではなく、HTML要素を指定したい場合には、insertAdjacentElement() が利用できます。
第一引数は、insertAdjacentHTML() と全く同じで、追加したい要素を指定する第二引数のみが違います。
こちらは、実装しているコードで使い分けてください。

 

ということで、jQueryなしで append() などと同じことを実行する方法でした。
システムによっては、jQueryを使えないこともあるかと思うので、この方法は覚えておきたいと思います。

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

ボトルネックの考え方

 ボトルネックは一つのアプリケーションの様な何かのまとまりを改善する時に使用できる考え方です。ボトルネックのおおまかな意味は次の通りです。

物事がスムーズに進行しない場合、遅延の原因は全体から見れば小さな部分が要因となり、他所をいくら向上させても状況改善が認められない場合が多い。このような部分を、ボトルネックという。

(5/14wikipediaより引用)
 例えば一連の処理、A-Zがあり、合計で52秒の実行時間がかかるとします。この一連の処理の実行にかかる内訳を、処理Kにかかる実行時間が30秒、他の処理は合計22秒で実行可能とします。この一連の処理の実行時間を50%短縮する、という課題が出た場合、処理Jの実行時間を短縮しなければ他所をいくら向上させても状況改善が認められません。この場合、処理Jをボトルネックな処理と言います。自分はあまり広い分野を知りませんがプログラミングなどの情報科学、料理などの日常生活の様な場面でボトルネックは往々にして現れます。またボトルネックがある問題の場合、ボトルネックの解決こそが問題の解決そのものとなる時がままあります。問題を分割し単純な小さな複数の問題に分けて考えるという手法(分割統治法)が複雑な問題を解決をしようとする場合に有効とされるのには、物事を考えやすくする他にもボトルネックである部分を見つけるという理由もあります。

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

[Google I/O]次世代のGoogle Mapでは、AR世界で狐が行き先まで案内してくれる!

まるでファンタジーの世界

先日開催されたGoogleの発表会イベント “Google I/O”でGoogle Mapの新機能 “ARナビ”を発表しました。

Googleマップ、案内キャラを追えば着くARナビをデモ。GPSとVPS併用、カメラで店舗の名前も – engadget

発表された内容によるとこのアップデートで、なんとカメラに映った風景に、目的地への道順などが直接表示できるようになるようです!

さらに、狐のキャラクターが目的地まで先導してくれる機能も搭載されるということで、ただの移動時間をファンタスティックな体験に変えてくれそうな予感がします。超楽しみ。

個人的な考えですが、将来的に追加コンテンツとかで人気の版権キャラクターや、自分でモデリングしたキャラクターモデルをアップロードして、そのキャラクターに案内してもらえるような機能が実装されたらもっと素敵になるような気がします。
Googleさん、何卒ご検討の程….!!!(←

ちなみに、Google Mapでは、今年の3/14に、いままでGoogleMap上に構築してきた地図データや3dモデルデータなどをAPI提供し、Unityと連携してARゲーム制作の材料にできるサービスを発表しています。

世界中の実際の場所が“ゲーム”に――「Google Maps API」を使って世界をモデルにしたAR対応のゲーム開発が可能に – @IT

いよいよ、ただの便利アプリとしてだけではなく、地図を使った新しいエンターテイメントを作り出す方向に本腰を入れ始めた感が出てきましたね。

期待を集めているAR機能の発展が思うように進んでいない現状で、今回のGoogle Mapのような取り組みがその突破口になって、急速に開発が進むなんてこともあるかもしれません。

楽しみですね。

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

ライフゲームの紹介

 ライフゲームは格子状の世界の上に置かれたセル達の模様がルールによって変化していく様を眺めるゲームです。
 お手軽に遊ぶならJohn Conway’s Game of Lifeがおすすめです。ライフゲームでgoogle検索をすると検索画面の背景でライフゲームが始まります。がっつりと遊ぶならGolly Game of Life Home Pageのフリーソフトがおすすめです。また、プログラムの練習として自分で作ってみるのもよいです。定番なのかハッカソンの課題として出されたことが何度かありました。
 ライフゲームの模様の変化(セルの生死)は次のルールに従います。(日本語版wikipediaより引用)
ライフゲームでは初期状態のみでその後の状態が決定される。碁盤のような格子があり、一つの格子はセル(細胞)と呼ばれる。各セルには8つの近傍のセルがある (ムーア近傍) 。各セルには「生」と「死」の2つの状態があり、あるセルの次のステップ(世代)の状態は周囲の8つのセルの今の世代における状態により決定される。

誕生 死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代が誕生する。
生存 生きているセルに隣接する生きたセルが2つか3つならば、次の世代でも生存する。
過疎 生きているセルに隣接する生きたセルが1つ以下ならば、過疎により死滅する。
過密 生きているセルに隣接する生きたセルが4つ以上ならば、過密により死滅する。

下に中央のセルにおける次のステップでの生死の例を示す。生きているセルは■、死んでいるセルは□で表す。

 ライフゲームでは面白い、興味深いとされる定番のパターンがいくつもあります。チューリングマシンを再現したパターンもあります。詳しくは調べてみてください。

グライダー(消えずに移動し続けるパターン) ブロック(最小の静的状態の一つ)
  • この記事いいね! (0)
著者:ym

Windows 10 April 2018 Update 完了して集中モード

自宅のPCも完了しましたが、会社のPCも Windows 10 April 2018 Update になりました。

昼飯時間にダウンロードして、あとでアップグレードしようと思っていたら、会議中にいつの間にかアップグレード開始していたという状況ですが、その間に食事すませて、無事完了です。どうだろ、ダウンロードに1時間、SSDではなくHDDですが、アップグレードに1時間といった感じですかね。

タイムライン機能。そもそも仮想デスクトップ機能を無効化しているし、必要ありません。アイコンすら出てきません。w

Android や iOS との連携。これは便利なのかも。まだ使っていませんが。

そして使えそうなこの「集中モード」。通知って超うざいですよね。画面からちらちら出てきたり、なので可能な限り画面に出てこない様に消し去っています。唯一の通知は、タスクトレイのアイコン変化のみです。それで十分。

最後に Edge 。 Microsoft も Edge が chrome や firefox より速いと言い張るので、使ってみたりしますが、Androidと連携とかしだすと必要に迫られそうだけど、現時点では業務では必要ないかな( *´艸`) 。確かに起動スピードは速そうだけど、実際使うとじわじわ遅さ感じます。

今のところ、新機能は実感できていませんが、じわじわ感じたいと思います。

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

【Mac】Simulator使用時にMacのキーボードから@が入力できない【未解決】

今回は、Macのキーボード入力についてです。
タイトル通りですが、何故かSimulatorで「アットマーク@」が入力できません。
別に「アットマーク」と日本語入力して、それを変換すれば入力できないこともないのですが…流石に手間すぎるので、解決策を模索している最中です。
ちなみに、タイトルにあるとおり、まだ解決できていません。

 

解決には至りませんでしたが、今回参考にさせていただいた記事はこちら。

Macで@が打てない&JISキーボードがUSキーボードと認識される現象の原因と解決策
https://fiv-nd.com/mac-keyboard-usjis.html

こちらは Simulator ではなく、通常の入力時にアットマークが入力できないときの対処法でした。
ちなみに、こちらの原因は、キーボードが JIS ではなく US で認識されていることが原因とのことでした。

私の環境でも確認したのですが、ご覧の通り、

キーボードの配列はJISとなっていました。
キーボードの設定は問題ないようでしたね。

もしかしたら、Simulatorの言語が英語なのが悪いのでは?とも思い、設定から変えたのですが、それも効果なしでした。

 

結局解決策は見つかりませんでした…。
時間を見つけてまた探したいと思います…。

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