月別アーカイブ 2月 2018

takahashi 著者:takahashi

ChromeがMacの通知センターに対応していたので設定してみた

先日、ネットでこんな記事を見かけました。

Google ChromeがMac OS Xでネイティブ・プッシュ通知に対応
http://gigazine.net/news/20160407-chrome-native-push-notifications-mac/

Mac版のChromeがMacの通知センターに対応していたとのこと。
早速設定してみました。

chromeのアドレスバーに
chrome://flags/#enable-native-notifications

と入力します。


こんな感じの画面が出てくるので、”ネイティブ通知の有効化 Mac”の”有効にする”をクリックします。

この後、Chromeを再起動すると、Chromeのネイティブ通知が有効になります。

Chrome独自のカード型の通知ではなく、Macの通知センターのものに変わっています。

以前、Chromeには独自の通知センターが搭載されていたのですが、現在はこれが削除されてしまっており、一度見逃した通知を再度表示させることができなくなっていました。

しかし、今回のネイティブ通知を有効にすると、Chromeからの通知の履歴がMacの通知センター残るようになり、再確認ができるようになります。

これは便利ですね。

現在はMac版にのみ実装されていますが、WindowsもWindows10から”アクションセンター”という、Macの通知センターと同様の機能が搭載されています。
Windows版のChromeもぜひネイティブ通知に対応してほしいです。


この記事は、自分が過去に別のサイトに投稿したブログ記事を編集したものです。

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

日本でGoogle Nexusシリーズの後継ともいうべきGoogle監修ブランド “Android One”

以前、Androidを普及させるために、Google自身が設計し、メーカーのプリインストールアプリを極力排したブランド、”Nexus”というのがありました。
余計なものが入っていない、ほぼ”純正”のAndroidを使うことができる上、端末のサポート期間内は常に最新のAndroidへ更新することが保証されているという、Androidユーザーにとっては非常にうれしい内容で、メーカーによる動作制限やムダ機能にうんざりしていたユーザーを中心に、非常に人気がありました。

僕も普段使っているスマホとは別に、Nexus7を購入しました。
当時としてはスペックもそこそこ高く、サイズ感も大きすぎず小さすぎない形で使いやすく、とても気に入っています。
現在はOSのアップデートからは対象外になってしまったものの、まだまだ現役の端末として利用しています。

そのNexusシリーズですが、残念ながら提供終了が発表され、2016年10月ごろには、公式のオンラインストアからも削除されました。

グーグル、「Nexus」ブランド終了予定、ネクサス端末の販売を一斉終了、アップデートなどサポートは今後も行うとアナウンス – GPAD

その入れ替わりになる形で、Googleの新しい現行のブランド”Pixel”がスタート。
こちらはNexusと打って変わって、Androidの機能をフルに生かせるようなハードウェア構成の”フルスペック”な端末です。
お値段もNexusよりも高くはなるのですが、”Google純正Android”の恩恵を最大限に受けることができるような内容になっています。

速報:Google Pixel 2、Pixel 2 XL発表。今回もスマホ史上最高評価のカメラを搭載 – Engadget

ただしこの端末、記事にもあるように日本では未発売、さらに将来的な発売も未定となっている上、日本での技適を取得していないので、国内で手に入れて使用するのは絶望的です。

Nexusがない今、今後日本ではGoogle純正のAndroidが入った端末は手に入らないのか…と思ってしまいますが、実は現行のものでGoogle純正のAndroidが利用できる端末があります。
“Android One”というシリーズです。

Android One – Wikipedia

Android Oneは、主にアジアなどの開発途上国、新興国市場での流通を目的とした、ミドルからローエンドの低価格帯スマートフォンである[1]。これらの国では裕福層が少なく、高価な端末を購入できる人が少ない。逆に安い端末となると性能が低すぎる上にアップデートが提供されない問題が起きている。Googleはこれらの問題を解消するために、Android Oneを市場に展開した[2]。プロジェクトは2014年よりスタートして以降、世界21ヶ国で展開している[3]。

開発は、各国のパートナーとGoogleが協力し、その国のニーズにあった高品質なハードウェアと、Googleが考えるAndroid体験を実現するソフトウェアを兼ね揃えたスマートフォンを作る。ハードウェア設計から部品の調達までGoogleが行っており、各メーカーから販売されるAndroid Oneは、全て同等の性能を有している。

とあり、NexusやPixelのように純正なAndroidとアップデートを利用できるうえに、価格の割にはハードウェア構成もどちらかというとハイエンド寄りになっている端末が多いのが特徴です。

日本ではY!Mobileをはじめとするキャリアなどで入手できます。

Android One – ワイモバ学園

同シリーズの中でも個人的に特に気になったのが京セラ製のX3という端末。

今までの京セラ製の端末は、どちらかというとローエンド向けで、性能よりも価格重視な印象が強いのですが、このX3という端末はその真逆のフルスペックモデルになっていて、さらに今時は少なくなってしまった赤外線ポートもついているというちょっと面白い端末です。デザインもお洒落です。

ローエンド志向の京セラにこのレベルのハイスペック端末を出させてしまうAndroidOneに、Nexusシリーズに似たポテンシャルを感じました。
自分は丁度SoftbankからY!Mobileへ移行する予定なので、次に変えるとしたらこの辺りの端末かな、と考えています。

ただ、”Android One”は上記にもあるように”発展途上国向け”のブランドです。
Googleから日本がそのようにみられているのかな、と考えてしまうとちょっと複雑ですし、個人的には本命はPixelシリーズなので、是非次のPixelシリーズは日本でも発売されてほしいなぁと思っています。

最近、どのAndroid端末も代り映えしなくなってきてつまらないなーと感じていたのですが、まだまだこれから面白い動きが出てきそうですね。

Pixel2/Pixel2XL – Google

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

【JavaScript】角度の調節も可能な吹き出し型ツールチップ「grumble.js」

チュートリアルなどで、ページの説明をするときなどにちょうど良さそうなツールチップ「grumble.js」のご紹介。
実装がとても簡単なのに、かなり良い感じの見た目なので、おすすめです。

GitHubページとデモページはこちらから

https://github.com/jamescryer/grumble.js
Examples and documentation on grumble.js

 

インストール等準備については割愛します。
で、一番シンプルなコードは下記のとおり。

$('#start').click(function(e){
    e.preventDefault();

    $('#grumble').grumble({
        text: 'ボタンです',  // 吹き出し内に表示したいテキスト
        angle: 200,  // 吹き出しの角度
        distance: 3,  // 要素との距離
        showAfter: 1000,  // 何秒後に表示
        hideAfter: 2000  // 何秒後に非表示
    });
});

HTMLは下記のように記述しました。

<button id="start">grumble.js START</button>
<button id="grumble">ボタン</button>

「grumble.js START」と書かれたボタンをクリックすると、1秒後に「ボタンです」と書かれた吹き出しが表示され、表示された2秒後に自動的に消えます。

 

なお、吹き出しの大きさは、指定したテキストの長さによって自動的に変更されます。
また、特に指定しなくてもフェードイン・フェードアウトで表示されますので、それもなかなかいい感じです。

主には上のコードで事足りますが、それ以外に使えるオプションは下記のとおり。

type: 'alt-'
hideAfter: false
hasHideButton: true

1つ目は、指定すると、吹き出しが青色になります。
なお、吹き出しの色はオレンジと青の2色が用意されているようです。

2つめは、上でもご紹介した、吹き出しを非表示にする秒数を指定する hideAfter です。
こちらに、数値ではなく false を指定すると、吹き出しをクリックしたときに消えるようになります。

3つめは吹き出しを消すボタンが表示されるオプションです。
吹き出しの右下に、小さく四角いボタンが表示されます。
こちらは、hideAfter に false を指定した時に一緒に使うようですね。
ただ、個人的にはボタンのデザインがちょっと微妙かなと感じるので、あまり使うことはなさそう…。
CSSで無理くりデザイン変更しちゃえばOKかな?

 

と、いうことで、吹き出し型ツールチップ「grumble.js」のご紹介でした。
コードもシンプルで、動きも軽快なので、使い勝手は良さそうです。
簡単なチュートリアルを実装したいときなどに使ってみてはいかがでしょうか?

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

ウェアラブルか

スマートフォンの出荷台数が減少した様です。皆、買わなくなったのですね。スマホの時代も終わりですね。

17年の世界スマホ出荷、初の減少 米IDC調べ :日本経済新聞

確かに私も買い替え購入していない。しかもヤフオクで2万円で落札した au 中古スマホ。

買い替え需要は継続して有るだろうけど。処理スピード、カメラ性能、だけでは違いを出しにくいということか。どの端末もおんなじですからね。

次は何?やっとウェアラブルか。

そんな時期なんですかね。

ソニーモバイルも、耳型端末を春に出すらしいしし。スマホ操作しなくてもメール返信。ドラマのスマホくんの様な。

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

【JavaScript】aタグでの画面遷移をキャンセルする方法

久しぶり?なJavaScriptについての私用備忘録。
今回は、HTMLのaタグをクリックした際に、画面遷移をさせない方法についてです。

例えば、下記のように指定していた場合に使えます。

<a href="#">リンク1です</a>

普通に実行すると、URLの最後に # が付いてしまいますが、画面遷移を無効にすることで、URLの最後に # が付くことを防ぐことができます。

 

で、この実装方法ですが、preventDefault というメソッドを使います。
具体例は下記のとおり。

// 本サイトのトップページへのリンクです
<a href="https://cpoint-lab.co.jp/" id="link">https://cpoint-lab.co.jp/</a>
// リンクの要素を取得
var element = document.getElementById("link");
element.addEventListener("click", function(e){
    // リンクがクリックされたときの処理
    e.preventDefault();  // 画面遷移を無効化
}, false);

コード自体は、実にシンプルです。
リンクがクリックされたときに、デフォルトのイベント=画面が遷移するのを抑止しています。

なお、jQuery の場合は、下記のように記述します。

$("#link").on('click', function(e){
    e.preventDefault();  // 画面遷移を無効化
});

クリックを検知している箇所の記述が違うだけですが、こんな感じ。

他にも、stopPropagation というメソッドや return false で遷移を無効化している例もありましたが、個人的にはこれが一番わかりやすかったので、こちらを使用しています。

 

以上、aタグでの画面遷移をキャンセルする方法でした。
なお、フォームの送信をキャンセルするのにも使えます。
画面遷移は使用頻度低そうですが、フォームの送信キャンセルは ajax とかでよく使われるので、覚えておいて損はないはず。
似たようなことでお困りの方は、是非ご参考にしていただければ幸いです。

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

macの起動時にブートローダーメニューを追加する方法

自分のもっているmacは、BootCampを使ってWindowsとmacOSのデュアルブート環境を作ってあります。

OS切り替えの際、過去のバージョンは環境設定やWindowsのBootCampメニューから次に電源を入れたときに起動するOSをあらかじめ指定できたので困らなかったのですが、最近macOSのファイルシステムがAPFSになってから、Windows側で次回起動するOSでmacOSを選択することができなくなりました。

したがって、デフォルトになっているOSではない方のOSを起動する場合、起動時にoptionキーを押しながら電源を入れないとOS選択画面が出てきません。
毎回、OSを切り替えるたびにOptionキーを押さないといけないというのはちょっと煩わしいので、せめて起動時に毎回OSが選べる画面をb出せないかなとさがしていたところ、こんなアプリを発見しました。

rEFInd

です。
このアプリを導入しておくと、起動時に写真のOS選択画面が表示されるようになります。

インストール方法は、まずmacをリカバリモード(command+R)で起動し、上のプルダウンメニューから
ユーティリティ->ターミナルをひらきます。
下記のコマンドを入れます。

csrutil disable

そのあとプルダウンメニューの林檎マークから、macを再起動します。

再起動すると、通常のモードでmacが起動するので
The rEFInd Boot Manager: Getting rEFInd
でA binary zip fileをクリックしてrEFIndを入手し、解凍します

中に”refind-install”
というファイルがあるので、これをターミナルで実行すると、インストールされます。

その後、再起動すれば、起動時にブートローダーの画面が表示されるはずです。

動作したことを確認したら、再度command+rを押しながら起動し、リカバリモードから

csrutil enable

を実行しておきましょう。

とても快適に使えてますので、おすすめです。

参考:
MacBookProにOS X, Windows 10, Ubuntuをトリプルブート

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

【アプリ】入眠困難型の不眠症の方におすすめなアプリ「寝たまんまヨガ」

日本人は世界的に見て睡眠時間が短い国として知られています。
たまに私も眠りにつくのが困難だったりするのですが、その時はこのアプリを使うことにしています。
ヨガアプリなのですが、本当に寝つきが良くなるんです。
インストールはこちらから。

寝たまんまヨガ 簡単瞑想: リラックスした睡眠で不眠解消! – Google Play の Android アプリ
「寝たまんまヨガ 簡単瞑想」をApp Storeで

 

で、今回おすすめするアプリは「寝たまんまヨガ」というヨガアプリです。
起動直後の画面はこんな感じ。

100円250円くらいの有料の音声ガイドが主ですが、2つほど無料のものもあります。
これだけで十分効果が分かるので、実質無料アプリです。

ガイド音声の再生画面はこんな感じ。

ごく一般的な動画アプリと変わりませんね。
再生ボタンを押せばガイドの再生が開始されます。
ちなみに、こちらは「イントロダクション」で、長さは14分くらい。
が、私はこれを最後まで聞けたことが少ないです。
個人差もあると思いますが、初回から気持ちよく寝落ちできます。

 

呼吸法とか、体の力を抜くことって、やはり大事なんですね。
疲れているはずなのに、妙に目が冴えてしまっているときなど、是非使ってみてはいかがでしょうか。

が、本当に深刻な場合は、お医者様にかかるようにしてくださいね!
ちなみに、布団に入って5分以内に眠れる場合、それは気絶に近いのだとか。
寝つきが良いからといって、良い睡眠が取れているとは限らないのですね…。
こちらも要注意です!

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

リアル店舗の楽天ペイっ

現金主義の日本。日本ってそんなに現金主義なのか。

私は、リアル店舗での支払い優先順としてはこんな感じ。

  1. iD
  2. Edy
  3. クレジットカード
  4. VISAデビット (番号を生成したり変更したりできるので、ネット利用で不安な買い物の時)

で、ネットショップの優先順は。

  1. Amazon Pay
  2. 楽天ペイ
  3. PayPal
  4. クレジットカード (結局、クレカ以外の決済に未対応で、ほぼコレに落ち着くけど。)

最近、これ良いなと思ったのが「楽天ペイ」。わかりやすくて簡単。

Amazon Pay にも、リアル店舗対応の 「Amazon Pay Places」 があるけど、ここ田舎の浜松市をみると、楽天ポイントを浸透させていた楽天側の勝ちで、「楽天ペイ」のリアル店舗の方が多く対応しています。

コンビニだとローソンが対応。

けど、iD Edy が使える店だと利便性で使わない。どうだろうか。

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

[要注意] nginx バーチャルホストで複数ポートかつSSL有効化したら平文通信できなくなった話

家のサーバーのnginxの設定をしていたら完全にドジってはまったのでそのメモ。
自分のサーバー環境は諸事情でリバースプロキシ経由でウェブサーバー本体に接続する構成に変更中でして、Nginxをリバースプロキシとして設定していました。
構成は以下の通り。

自分のサイトは、もともとそれぞれサブドメインを割り当てたバーチャルホストが複数稼働している環境だったため、nginx側もバーチャルホストに対応すべく下のような設定にしていました。

すると

BadRequestのエラーが。
いろいろ試してもエラーが解消されず頭を抱えていたのですが、調べていたら以下のサイトを発見。

nginx連載6回目: nginxの設定、その4 – TLS/SSLの設定 – インフラエンジニア way
https://heartbeats.jp/hbblog/2012/06/nginx06.html

>sslディレクティブをonに設定すると、SSLが有効になります。ただし、listenディレクティブでsslパラメータを指定したときには不要です。

>ssl on;

>listenディレクティブにsslパラメータを付けると、そのポートでSSLを有効にして待ち受けるようになります。そのポートに関して後述するsslディレクティブをonにしたのと同じ動作になるため、sslディレクティブの記述は不要になります。

>listen 443 ssl;

あっ、なるほど…!
ssl on;
の記述をしてしまうと
server{}
内で定義されている全ポートにsslが有効になるので、80番ポートでアクセスしてもssl通信と解釈されてしまい、エラーが出ていたようです。
443ポートだけsslにしたい場合は

listen 443 ssl;

とだけ指定しておけば443ポートだけsslを有効にできるようです。

てっきり
“ssl on;”
を入れないとsslが有効にならないものと勘違いしていました(苦笑

さっきの設定を修正すると以下のようになりました。

これでnginxを再起動したところ、無事80番ポートの平文通信と443ポートのSSL通信両方ともできるようになりました。

分かってしまえばなんともくだらない間違いですが、大分焦りました。

もっと勉強せねば…


この記事は、以前筆者が書いた記事を一部変更したものです。

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

【CSS】CSSのみで角丸の吹き出しを作成する方法

吹き出しのデザインを実装する場合、背景画像に吹き出しの画像を適用するという方法もありますが、CSSで実装したほうがレイアウトの融通も利くので楽!
ということで、今回は吹き出しのデザインをCSSで実装する方法についてです。

参考にしたサイトはこちらです。

CSSで作る!吹き出しデザインのサンプル19選
https://saruwakakun.com/html-css/reference/speech-bubble

参考に…というより、ほぼコピペですが…。
他にもいろいろなデザインの吹き出しのサンプルコードがあるので、是非訪問してみてください!

 

で、実装方法ですが、下のコードで、下記のような右から吹き出したスタイルの吹き出しが作れます。

<div class="balloon">
    <p>右向きの吹き出しです</p>
</div>
.balloon {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 10px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 2px #555;
    box-sizing: border-box;
    border-radius: 10px;
}
.balloon:before{
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}
.balloon:after{
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #555;
    z-index: 1;
}

とても簡単ですね!
また、吹き出しの三角の部分の位置を変えたい場合は、.balloon:before
.balloon:aftertop のパーセントの値を変更します。
行数でいうと、18行目と28行目の箇所です。
パーセントを大きくすると三角がに、小さくすると三角がに移動しますので、お好みの位置で調節してください。

 

以上、吹き出しデザインの実装方法でした。
他にも、枠線を消して背景色を変えたりしても、また違った雰囲気になって良いですね。
さらに、参考にさせていただいたサイトでは、円形の吹き出しや、考え事風の吹き出しの実装方法についても解説しているので、こちらも是非参考にしてみてはいかがでしょうか。

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