月別アーカイブ 2月 2019

takahashi 著者:takahashi

Google ナビゲーションバーのウェブサービス通知を廃止へ

GoogleがサイトのナビゲーションバーにあったWebサービスの通知を廃止するようです。

通知を管理する – Googleアカウントヘルプ

この機能は、Googleの各サービスから送られた通知を一か所で確認できるというもの。

例えば、Google+やGoogleフォトなどからの通知を、このエリアからまとめて確認することが可能でした。

この機能は2019 年 3 月 7 日に廃止するとのことです。

エンジニアにとって、どんなUIが利用者にとって最も使いやすいのか、案外知ることは難しいもので、ある程度の試行錯誤は避けては通れません。

IT業界でもトップのGoogleでさえ、UIの試行錯誤を行っているのだということを垣間見た瞬間でした。

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

【html-css】ヘッダーを固定する方法とオブジェクトの優先順位

今回は、ヘッダーの固定方法とz-indexの親子関係について説明していきたいと思います。

webプログラマーとしてコンテンツが長いページを作ることは当たり前のようにありますが、長いページを最後まで見終わった後にあれ?

戻るボタンどこだっけ?一番上か!!(涙)みたいな思いをユーザーの方々にさせたくないと思い載せてみました。

まず、ヘッダーの固定する方法からみていきましょう。とりあえず何の変哲もないサンプルから載せていきます。

</pre>
header {
width: 100%;
height: 60px;
text-align: center;
}
<pre>

これは、見た目は何もいじっていないプレーンの状態のヘッダーです。このままだと当然下にスクロールするとヘッダーも

一緒に下がってしまい、後で戻るボタンを探す羽目になりかなり煩わしい思いをします。

そこで、ヘッダーを固定するために次の属性を指定します。↓

</pre>
position: fixed;

z-index: 9999;
<pre>

このように、上のposition: fixedを指定するだけでヘッダーを固定することができます。特殊なギミックを与えない場合は

これだけでも問題ないと思います。しかし、長いページの場合はスクロールすると、このままでは子のオブジェクトが親である

ヘッダーを覆ってしまい見た目もかなり悪目立ちしてしまいますね。

そこで下のz-indexの出番になります。このz-indexですが、今は9999と設定されてありますが、実はこの数値が大きければ大きいほど

親の優先順位が上がります。つまり、9999と設定しておくことによりこれから作る子オブジェクトよりは絶対に優先順位が

下がることはありません。

初学者のうちはデフォルトで9999でいいやみたいな感じで覚えていても問題ないですが、手の込んだサイトを作りたい時は

色々試してみて使い方をマスターしておく必要があるかもしれないですね。

ですが、見栄えのいいページを作る時はヘッダーのカスタマイズが必須になるのでざっと覚えるだけでもプラスになると思います。

 

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

【Cordova】アプリがオフラインになったことを検知する方法

タイトル通り、今回はアプリ(というより、アプリが実行されている端末?)がオフラインになったことを検知する方法についてです。
現在開発中のアプリは、当然ながらデータ通信が行われているので、アプリ利用時は常にオンラインである必要があるのですが、何らかの原因でオフラインになったときに、それを通知して、ネットワーク環境の確認を促すようにしたかったためです。

 

今回は、下記のCordovaのページを参考にしました。

オフライン – Apache Cordova
https://cordova.apache.org/docs/ja/3.1.0/cordova/events/events.offline.html

実装方法はとても簡単で、プラグインの追加なども不要!
私の環境では、index.js ファイル内に、下記のコードを追加するだけでした。

document.addEventListener("offline", onOffline, false);

function onOffline() {
    // オフラインの時に実行したい処理
}

サンプルコードを見ると、追加ファイルは index.html である場合もあるようです。
こちらは、開発環境に合わせて変更してください。

あとは、onOffline() 内に実行したい処理を記述すればOKです。
私は、Toast でエラーメッセージを表示しています。

なお、iOS の初回起動時、最初の オフラインイベントは少なくとも起動に 1秒かかりますとのこと。
こちらは仕様のようなので、諦めて受け入れるのが良さそうです。
また、Android や iOS は問題ありませんが、Windows Phone 7 など、端末によっては、オフラインが検知できないこともあるようなので、対応しているか十分注意してください。
…Android と iOS が対応していたら、ほぼほぼ大丈夫だとは思いますけどね。

 

以上、アプリがオフラインになったことを検知する方法でした。
プラグインも不要なので、実装しておいても良いと思います。

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

LeafletのアイコンオプションiconAnchorの意味

 Leafletは地図をJavaScriptで描画、操作するためのライブラリです。地図上に何かを置きたい時、それはアイコンオブジェクトを用いて実現することが多いです。アイコンを定義する際にはicon関数を用いて次の様に定義します。次のコードはMarkers With Custom Icons – Leaflet – a JavaScript library for interactive mapsからの引用です。

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

 このオプションの中にiconAnchorというものがあります。直訳してマーカーの位置に対応するアイコンの点です。Leafletはこの緯度経度に、このアイコンを用いてマーカ―を、この地図上に置く、という様にマーカーを地図上に置きます。

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

 マーカーという以上、地図を見るものにその印を示すために絵を用います。iconAnchorはこの絵のどの部分に指定した緯度経度がくるかを指定するオプションです。もしiconAnchorを間違えた場合、矢印の根元のような直感的でない部分が位置を指すことになってしまいます。
 Explanation of Leaflet Custom Icon LatLng vs XY Coordinates – Stack Overflow
 このStack Overflowの図説が完結にまとまっていました。

 左上を(0,0)とし、用いるimgに合わせてpx単位で合わせることが基本になります。割合を用いないのはアンチパターンに見えますが、アイコンを定義する際の単位はいずれもピクセル単位となっているためこのやり方が推奨のやり方となっています。

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

Office Mobile と画面サイズ 10.1 以下

YOGA Tablet2 10 を購入するきっかけとなったのは、2 万円で売られていたということですが、もう一つ Office Mobile で無償で編集機能が使用できるギリギリサイズだったことです。

でも最近、というか結構前から Office Mobile を起動すると Office 365 の購入を要求される様になってしまいました。最近、町内の役員になってYOGA Tablet2でOffice製品を使いたいので、調査開始です。

ホームページを見てみると。

対象デバイスと画面サイズ、のところには 10.1 サイズと明記されている。

困りました。私の YOGA tablet 2 は 10.1 インチなので問題ないはず。

マイクロソフトのコミュニティで以下の様に書き込みがあるので、私も試してみました。

エクセルを再インストールしたら、使えるようになりました。
同時に同じような状況だったワードも再インストールしていないのに使えるようになりました。

https://answers.microsoft.com/ja-jp/msoffice/forum/msoffice_excel-mso_mobile-mso_mobapps/101%E3%82%A4%E3%83%B3%E3%83%81%E4%BB%A5%E4%B8%8B/e738eed1-cb07-41ae-9dc2-60c3a62edc56

Excel Mobile, Word Mobile, PowerPoint Mobile をすべてアンインストール。さらに Office 側の Sway も入っていたので消しておきました。

削除完了後、おまじない程度に Windows OS を再起動して、アプリをすべて最新状態に更新。

必要な Excel Mobile と Word Mobile をインストールしてみたところ、新規扱いになり、説明画面もでて来ました。もちろん、編集機能が利用できる様になりました。

助かった。

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

Chrome拡張機能の設定が変更できなくなった時に確認したいこと

インターネット上の記事の更新を受け取るためにFeedlyを使っているのですが、Feedlyで何か新しい更新を検知した際にプッシュ通知で知らせてくれるChorme拡張機能があり、自分のChromeにインストールして使っていました。

ところがある日、拡張機能の設定を変更しても変更が適用されない不具合に遭遇。原因がわからずいろいろ試していたところ、あることに気づきました。

“拡張機能を管理”からアクセスできるChrome側の拡張機能設定画面で

“ファイルのURLへのアクセスを許可する”
という項目がいつの間にか追加されていたのですが、無効になっていたこの項目を有効にしてみたところ、設定が正常に反映されるようになりました。

いつからこの項目が追加されたのかはわからないのですが、いつの間にかこの設定の影響を受け、警告も出なかったため気づかないままになっていました。

拡張機能の設定が反映されなくてお困りの方は一度確認してみてください。

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

【Cordova】アプリにステータスバーを追加する方法

設定したのがずいぶん前だったので忘れていました…。
今回は、Cordova で開発しているアプリにステータスバーを追加する方法についてご紹介します。
Android なら、特に意識せずに開発ができるのですが、iOS で、特にヘッダーが固定されているデザインの時にデザインが少々崩れます。
ステータスバーのエリアまで、アプリの画面になるので、ヘッダー固定で、それ以外の要素がスクロールになったとき、ヘッダーを突き抜けてスクロールしてしまいます。
スクリーンショットを取り忘れてしまったので文章で書いておりますが、わかりにくいですね…。
発生した現象については、下記の記事が参考になります。

cordova-plugin-statusbarの使い方。 – Qiita
https://qiita.com/nagao_norihiro/items/2e6189c147098dc63ab9

そのため、iOSを対象としているときや、どうしても必要ない!という場合以外は、念のため導入しておくことをおすすめします。

 

さて、ステータスバーを設定する方法ですが、cordova-plugin-statusbar というプラグインを使用します。
GitHub のページは下記から。

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

プラグインのインストールは、下記のコマンドを実行します。

cordova plugin add cordova-plugin-statusbar

インストールが終わったら、config.xmlpreference で設定します。
まず、ステータスバーを有効にする場合は、下記を追加します。

<preference name="StatusBarOverlaysWebView" value="false" />

次に、ステータスバーの背景色を下記で指定します。

<preference name="StatusBarBackgroundColor" value="#000000" />

なお、色の指定は16進数 6文字で指定してください。
白色だからと、うっかり #FFF と書いたところ…青になりました。
きっちり 6文字で記載してください。

あとは、iOS でよくある、ステータスバーとタップすると上までスクロールするという処理を追加したい場合は下記を追加ます。

<preference name="StatusBarDefaultScrollToTop" value="true" />

デフォルト値は false なので、ステータスバータップでスクロールをさせたい場合は、true に設定します。

最後に、私は使いませんでしたが、ステータスバーのスタイルを指定するときは、下記を使用します。

<preference name="StatusBarStyle" value="lightcontent" />

設定できるオプションは、default, lightcontent, blacktranslucent, blackopaque があるようです。
デフォルト値は lightcontent です。

 

以上、Cordova アプリにステータスバーを追加する方法でした。
Android のみであれば任意でOKだと思いますが、iOS で利用するのであれば、導入しておくことをおすすめします。

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

HSL表記によって色を自然に変化させる

 色の表記の定義である色空間には様々なものがありますよく聞くものに赤青緑の三原色を用いたRGB、それに加えて透明度を足したRGBAがあります。他にも印刷で使われるCMYK(Cyan, Magenta, Yellow, Key plate)やLab色空間、XYZ表色系など目的に合わせて多くのものが作られています。HSLはその中の一つでHLSとも呼ばれ色相(Hue)、輝度(Lightness)、彩度(Saturation)の3値から定義される色空間です。HLSの値の大雑把な意味は次です。

  • 色相:色味を0~360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。
  • 彩度:HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
  • 輝度:明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間(50%)を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすいだろう。

HLS色空間 – Wikipediaより引用

 紹介するHSLの主な利点は二つです。まず第一にCSSのオプションとして直接指定できます。次の様にhsl(hue, ssaturation, lightness)を指定するのみで大変楽です。

style="background-color: hsl(90deg, 100%, 50%);

CSS を使った HTML の要素への色の適用 – HTML: HyperText Markup Language | MDN #HSL_functional_notation
– CSS: カスケーディングスタイルシート | MDN #HSL_colors
 わざわざ変換式を実装してRGBに変える必要も、RGB上でややこしい計算をする必要もありません。
 第二は自然で多彩な色の変化を簡単に表せることです。次のJSFiddleはHSL方式とRGB方式それぞれで箱の中の色を変えるコードの実装です。

 色相の下に彩度、輝度が引っ付いているイメージで簡単に色を決定することができると思います。RGBでは赤緑青から離れる程どうやって思いついた色を作るのかてこずるでしょう。
 HSLがRGBに比べて特に便利なのがある色からある色への変化です。同時刻にある色になる様に三値をそれぞれ一次関数的に変化させるのみできれいな色の変化を実現できます。

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

マイニングの低迷

GMOさんが、ニュースに出ていましたが、停止せずにコスト削減に動くとのこと。継続するのですね。

GMO:仮想通貨のマイニング拠点を夏前までに移転 「電気代を半分以下に」 熊谷氏「まだ勝負は終わっていない」「必ず取り戻す」

https://jp.cointelegraph.com/news/gmo-internet-revailed-fy-2018-earning-result-crypto-business-s-operating-loss-was-13-bln-yen

仮想通貨イーサリアムのマイニング報酬額 過去最低を記録

https://jp.cointelegraph.com/news/ethereum-daily-mining-rewards-are-at-lowest-level-ever-reported

低迷しているときこそチャンス?なのかな。

自宅の糞PCだとGPUとかかなり投資が必要だし、個人でリグ運用しても電機代で終わるだろうしな。エコキュートみたいによるフル稼働させようかな。

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

ARM版のWindows10がRaspberryPiにインストール可能に!?

いつも読ませていただいているGigazineさんにこんな記事が上がっていました。

誰でも簡単にRaspberry Pi 3へ64bit ARM版Windows 10をインストールできるツールが登場 – Gigazine

今回紹介されたのは、元々Raspberry Pi用に提供されていたWindows 10 IoT Coreではなく、デスクトップ用のARM版Windows10をRaspberry Piにインストールする方法です。

ARM版Windows10といえば、ARMという異なったプロセッサでありながら、Intel製CPU向けに作られたWin32(Windows用32bit)アプリケーションを実行できる、ということで一時期話題になりました。

正規の製品版Windowsなので、他のRaspberry Pi用OSとは違いライセンスを購入する必要はあるかと思いますが、うまく行けばRaspberry Pi上でWindowsアプリが動くかもしれない…となればとても魅力的に感じます。

自分もRaspberry Piは持っているので、また実際に試してみたいと思います。

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