作ったら始まるNuxtでPWAものがたり

11111

はじめに

皆様は、朝起きたときこんなことないですか・・・?

  • だるい、勤怠連絡のメール入れるのめんどくさい
  • 頭痛い、文章考えたくない
  • 眠い、寝起きだし考える余裕ない

そう、我々人間は休みの連絡を入れるのがめんどくさいと思っています。

さて、そんな状況を改善するには・・・

我々プログラマはコードを書いていこう。

というわけで、WEBで文章を作ってくれるマイクロサービスを作ってしまいました。
もともとプログラマがなぜコードを書くのか、それはめんどくさいことを自動化したり簡略化したり、技術で解決したいからです。

こういうものを作るときに気をつけなければいけないのは、いかに使いやすく作るかです

11111

遅れます.me - 遅刻の連絡をもっとカンタンに

簡単に使えるように

とりあえず、UIの専門家ではないので、実際に出来上がったものを触ってもらったほうが早いかもしれないです。
私が考える使いやすいと思うもの、とくにこういった小さいプロダクトでは、シンプルを極めていくほど、使いやすいのではと考えています。

  • 画面の遷移は少なく
  • ボタンなども極力減らす
  • 必要以上の情報を削る
  • 軽いアプリぐらい気軽に使えるようにする

このように使いやすさを意識するのは当然ですが、実はUI/UXよりも何より意識したいのは、一番気をつけたいのは、起きてからスマホを開いて、このWEBアプリ画面までいかに早くたどり着けるかです。

アプリまでの入り口を近くしたい

これが割と重要なポイントでした。 ネイティブアプリであれば、起動も使用するにあたっても不自由なく使えます。

  • ネイティブアプリでは、スマホのバージョンによる差異の吸収が必要
  • ネイティブだと公開、周知してダウンロードするまで使ってもらえない
  • そもそも開発環境の構築がとても手間

実は、WEBベースのPWAアプリだとこれをすべて満たしてくれます。

  • ブラウザでお試し的な利用ができる
  • ホスティング、公開、メンテナンスも容易
  • とりあえず新しい何かが使える
  • 起動速度に関してはPWAで対応可能
  • PWAであればコードチョット書き足すだけでネイティブのごとく動く

PWA対応は、今回のでは特に重要なポイントでした。
デスクトップからネイティブアプリのごとく起動しますが、ストアで公開する必要もありません。
既存のWEBアプリに設定を書き足すのみで対応可能になります。

最終的にこのアプリ、作ったのは私ですが私自身は全然これを使っていませんでした。
何故使っていなかったのか聞かれてしまうと、開くのがめんどくさかったから。
しかし、PWA対応をしてネイティブアプリのごとく振る舞うようになってから世界が変わりました。

Nuxt.js + PWA

本来、PWAというのはネイティブアプリを作るよりは比較的簡単ですがそれでも実はやること多くめんどくさいものです。
過去に、このような記事を書きましたがその対応でも、すごくめんどくさかった記憶があります。

【OGP/PWA】サイト公開時に設定したい内容【自分用】 - Qiita

実はめんどくさい Manifest.json

PWA化を進めていくと、Manifest.jsonというキーワードにたどり着くと思います。 これが実は結構クセモノで、上げるだけでも嫌になります。

  • Index.htmlにManifest.jsonの参照を仕込んでいく
  • イコン画像を以下の枚数分だけ用意する
  • 72x72
  • 96x96
  • 128x128
  • 144x144
  • 152x152
  • 192x192
  • 384x384
  • 512x512
  • 画像の情報を書き込んでいく

実際にこれを実装していくとコード量って増えるんですよね。
とにかく長くてめんどくさい。。。。

  <head>
    <!-- 中略 --> 
    <!-- for iOS -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <!-- for Android -->
    <link rel="manifest" href="favicon/manifest.json">
  </head>
{
    "name": "アプリ名称",
    "short_name": "短縮したアプリ名称",
    "description": "アプリの説明",
    "theme_color": "テーマカラー",
    "background_color": "背景色の指定",
    "display": "動作モードの指定",
    "start_url": "画面を開いたときのURL",
    "icons": [
        {
            "src": "アイコンのパス",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "アイコンのパス",
            "sizes": "48x48",
            "type": "image/png"
        },
        ・
        ・
        ・
        続く
        ・
        ・
        ・
        {
            "src": "アイコンのパス",
            "sizes": "512x512",
            "type": "image/png"
        },
    ]
}

また、実は必要なアイコンサイズって明確に定義されておらず、情報が錯綜しているのです。

実装コストを抑えるNuxt.js

NuxtのプラグインではPWA対応が簡単です。

新規プロジェクト作成時は、Nuxtを入れるか聞かれます。とりあえず追加しておくといいでしょう。

導入

導入はプラグイン方式なので、既存のページを対応してくのであれば

yarn add '@nuxtjs/pwa'

とりあえずこれで。

nuxt.config.jsonに書き足していきます。

  modules: [
     '@nuxtjs/pwa'
  ],

めんどくさいアイコン対応

アイコンは指定がなければstatic/icon.pngが使用されます。
余白等も考慮した512x512pxのアイコンを配置しましょう。

細かく指定しなくても、よしなにやってくれます。

manifest.json

これを指定するとホーム画面に追加できるようになります。

実は、manifest.jsonを用意する必要はありません。
nuxt.config.js書き足すことによって対応されます。

  manifest: {
    name: "遅れます.me",
    title: "遅れます.me",
    'og:title': '遅れます.me',
    description: 'いつものように起きたら、突然の頭痛、そんなとき、仕事のメールを打ちたいですか?朝、いつもどおりに出発・・・しかし突然の電車遅延。混雑した社内でメール打ちたいですか?そんなあなたのためのサービスです。',
    'og:description': 'いつものように起きたら、突然の頭痛、そんなとき、仕事のメールを打ちたいですか?朝、いつもどおりに出発・・・しかし突然の電車遅延。混雑した社内でメール打ちたいですか?そんなあなたのためのサービスです。',
    lang: 'ja',
    theme_color: "#529b58",
    background_color: "#bde0c0",
    display: "standalone",
    scope: "/",
    start_url: "/category"
  }

まとめ

まず、朝起きて一発目に休みたいとか眠いとか言ってる時点で普通の社会人としては駄目ですね・・・w
自分でも造ったとき、最初はPWA対応しておらず、使うのがめんどくさくなっていました。
実は意外と簡単にPWA対応は出来てしまうのです。見る限りでも使っている方は非常に多いので、ぜひ対応していってほしいところです。

フレームワークレベルで対応してくれるのはとてもありがたく、また公式ドキュメントがかなり充実します。
読めばほんとに簡単にかけてしまう程度にまとめてくれており、各項目の名称なども既存のmanifest.jsonを踏襲してくれているので比較的理解もしやすいと感じています。

そんな感じで、みんなもっとネイティブアプリ増やしていこうぜ!

【検証】余ったキーキャップは、箸置きとして使えるのか

image

キーボードを作っていると、長いキーは余りますよね・・・?

特に、1.25u, 1.5u, 2uサイズの長さのは割と余ってる人はいるのではないでしょうか。

本日、イベント中に「箸置きとして使えるんじゃね?」という発言から実際に試してみたので、その感じをまとめていきたいと思います。

選手紹介

今回の選手は、以下の通り。一般のご家庭に余っているキーキャップです。

諸事情につき、TaiHaoのキーキャップ、中華メカニカルのキーキャップしか用意ができませんでした。

検証環境:英字キーボードの余ったキー

箸は一般的な長さの割り箸

続きを読む

QRコード決済の真骨頂は個人間送金にあり!

こんばんわ、篠原です。

タイトルにもありますが、先日友達同士で金銭の収受を行うことが必要となりました。送金の手間を考えたとき、せっかくなのでPayPay個人間送金を使おうって話になりました。 いままで自分自身、スマホ決済に関しては、実はあまり積極的ではありませんでしたが、使ってみると思いの外便利だったので記事にまとめてしまおうと思います。

f:id:T_Shino:20190214024832j:plain

※写真はバレンタインなのでチョコレートにしてみました

スマホ決済とは

スマホ決済には何種類かあります。

日本で主流なのは前者のFelica決済ですが、実はこれ、NFC-Type FというSONYが規格したRFID接触企画に則ったもので、ガラケー時代からおなじみ、おサイフケータイに使用されているものです。 主にモバイルSuica、ApplePay、QUICK Payなどがあります。

一方、後者のバーコード決済は主に中国などの先進国で主流となっており、こちらは中国国内で流通するスマートフォンNFCが搭載されていないなど、金銭的問題によるもので普及が進みました。 日本ではこれが使えるサービスは今の所、LINE Payと、PayPayですかね。あとは少数派ですがOrigami Pay, KYASHなど。 スマホ決済を進めるにあたってはPayPayの、100億円あげちゃうキャンペーンは記憶に新しいかと思います。これによって、PayPayは一度にかなりの利用者を囲い込むことに成功しました。

今回の話題では主に、後者のバーコード決済がメインになります。

続きを読む

賢い自作キーボードの作り方を知っていますか?

自作キーボード Attack25を作りました。そのときに写真を多めに取りましたので、自作キーボードを失敗しないための指南みたいな記事です。

※この記事は、Qiitaに上げたものと同一記事です

別のキーボードキットを自作する上でも、必要な知識は多めに残していけたらと思います。

おことわり

  • 基本の組み立て方については説明しません。お手元でビルドマニュアルをご用意ください。
  • キットによって組み立て方の順番は異なります。
  • 半田付けのコツとか、ポイントとかを押さえたいこうと思って記事を書いています。

IMG_20190114_001234

制作前に

自作キーボードに使用するには工具は重要です。

安心、安全な環境がない状態で工具を不適切に使用すると、部品の破損や、思わぬ怪我にも繋がりますので必ず環境構築の際にはケチらないでください。

必須工具

半田ごて

HAKKOの温度調節コテを買いましょう。 過去にハンダ付けの経験が浅いと、LEDを潰して泣きます。(私も壊しました)

IMG_20190113_224636

ハンダ

ハンダは、融点温度が低い電子工作用の共晶はんだを使います。画像にあるもので、自作キーボード3台分ぐらいは組めます。 太さは1mmぐらいか、0.8mmとか、少し細めのにしましょう。太いものはハンダの量を微調整できなくて難しいかもです。

IMG_20190113_214413

※環境に悪いからと、鉛が入っていない鉛フリーはんだもありますが、こちらは融点温度が高く、粘り気も強いのでハンダ付けにはかなりのコツが必要になります。また、確実にLEDが壊れます。

ちなみに、このハンダの選び方によって難易度が途端に下がります。

ニッパー、ラジオペンチ、ピンセット

ニッパー、ラジオペンチも小さめの電子工作用のものを買いましょう。電気工事用、配線用では大きすぎて細かい作業ができません。

IMG_20190113_224712.jpg

また、ニッパーは切断面が平らな面になっているものがおすすめです。最後にリード線を切りやすいのです。

チップ部品のハンダ付け、LEDの取り付けなど、細かい作業にはピンセットは必須です。先の尖ったものを使用しましょう。 これは100円ショップのものでもいいかと思います。

ドライバーのセット

自作キーボードには大きくてもM2のネジが必要になります。頭は1番ぐらいの細いドライバー等を多用することになります。

画像のようなセットあると便利です。ネジの頭に合わせてみて、程よくフィットするものを使いましょう。

img_20190113_224651

あと、締めるときに無駄に力は入れなくても大丈夫です。

アクリルはそこそこ伸縮性もありますが、締めすぎると割れます。アクリル自身が伸縮することで緩みにくくなります。

その他

  • 細かい作業が苦手な人はハズキルーペなど。
  • 机は燃えたり溶けにくい素材の上で。広いほうがいいです。

電子部品や専門用語について

  • PCB:プリント基板のこと。
  • ランド:基盤の、半田付けできる金属のとこ
  • シルク:印刷された文字やマーク
  • パターン:基板上の配線などの総称
  • 呼びハンダ:AとBとハンダと半田ごてを同時に持つことはできないので、片側に事前にハンダを乗せておくことです。
  • スルーホール:貫通した基板上の穴のこと。内側もメッキがされていて、結構な量のハンダが流れます。流しすぎると反対側がかっこ悪くなります。

半田付けのコツ

こちらの記事がわかりやすかったのでオススメ。

ハンダごてを買わされ、そして教わる - デイリーポータルZ

組み立て、ハンダ付け

順不同です。各々のビルドマニュアルを参照しながら、その手順に沿って進めてください。特に詳しい記載はしません。項目ごとに注意とか書いてあります。

まずは開封

img_20190113_194612

LEDの取り付け

ハンダを温め、LEDをつけていきます。温度調節コテで、220℃で半田付けします。 加熱しすぎない範囲で、十分にあたためてあげることがコツです。

img_20190113_195307

LEDは「穴に引っ掛ける」→「基盤側をあたためてハンダを盛る」→「ハンダを伸ばす」という工程で電気的に接続させます。

ある程度慣れていると270度でも問題なくできますが、破損のリスクは上がります。鉛フリーはんだでは半田付けできません。

離したあとはクセでハンダ線でLEDの温まってないとこを抑えたりとか、変なことやっています。

IMG_20190113_195949

LEDについては、割とコツがいるので難易度高いです。

Attack25の場合、アンダーグロウで厚く盛るとスイッチに干渉します。

ダイオードの取り付け

続いてはダイオードの取り付けです。基板上の記号の向きと合わせて入れていきます。

ダイオードには極性があり、向きが逆ですと動かない上にいろいろめんどくさいです。ピタッとキッチリいれて、入れたら足を根本で追って広げます。

img_20190113_200142

IMG_20190113_200228

IMG_20190113_200247

どんどんはんだ付けしていきます。はんだ付けしたら、なるべく根本、ランドのフチに合わせて切るようにします。
(慣れてると、面実装のほうが裏返したり切ったり…って手間がなくてラクです)

IMG_20190113_203956

ProMicroの実装、動作確認1(LEDとProMicro)

LED, ダイオードと終わりましたら、ソケットを半田付けします。 リセットスイッチもハンダ付けします。

IMG_20190113_203821

Pro microをセットしてQMK Firmwareを焼きます。

img_20190113_211747

下のように光ればファームウェアの書き込み、LEDの実装はOKです! LEDはアンダーグロウのみの実装なので、私のは下向きに点灯します。

img_20190113_212335

img_20190113_212709

スイッチの実装

スイッチを実装していきます。ある程度の対角線上とセンターをセットしたら、半田付けしていきます。

img_20190113_213122

ハンダは中途半端に少ないということはありません。スルホールなので、多めに消耗します。 そんな感じでスイッチを全部半田付けします。

img_20190113_214007

IMG_20190113_214142

img_20190113_214350

動作確認2(スイッチ、ダイオード

この段階で一度、PCに接続してキーの入力確認をしてください。
基本的に前項目の写真のように半田付けされていれば、接続不良は起こらないとは思いますが……念のために。

IMG_20190113_215516

外装品の取り付け

アクリルプレートをつけていきます。

Pro microの足が長すぎると干渉しますので、ギリギリまで切り詰めます。0.2mm程度の飛び出しであればアクリルプレート自体が伸縮してくれるので、あまり気にする必要はありませんが、確実に飛び出しているものはかなり負荷になります。

img_20190113_215638

img_20190113_215948

IMG_20190113_215948

カバーのネジを止めて、背面が完成です。

IMG_20190113_220714

お好みのキーキャップをつけていけば、完成になります。

img_20190114_001234

IMG_20190113_221012

※キーキャップが足りていません。寄付おまちしております。

まとめ

自作キーボードは楽しいですよね。ほんとに楽しい。ハンダ付けも電子工作好きにはたまらないです。

以上、楽しい自作キーボードライフを!

img_20181202_164735

img_20181203_195203

投げ銭Bot SENSUのまとめ

f:id:T_Shino:20180504194031p:plain

みなさんこんばんわ、Shinoです。こちらではご無沙汰ですね。
さて、仮想通貨の投げ銭サービスSENSUがリリースされてから約1ヶ月程度経過しました。

いくつかSENSUのサービスや解説記事を私も他の場所でリリースしておりますので、今回それを記事にまとめていこうと思います。

さぁ、あなたにも快適な投げ銭ライフを!  

公式サービス 

公式Web

sensu.tips

こちらの公式Webにて、アカウント登録や変更などすべてをご利用できます!

ソーシャルサービス

ソーシャルサービスにてBotを操作し、投げ銭/撒き銭を行います。 実は以下リンクはリンクして無くてもできるんだけど、できることならアカウントリンクを推奨。 やり方は次のリンクリストにあります!

  • Discord
    discord.gg
    Discordの公式サーバーです。開発メンバー含め、リリース情報や更新情報もこちらで。このサーバーから対応通貨ごとのサーバーへのリンクもあるため、お得な情報も手に入ります!

  • Twitter twitter.com
    SENSUのTwitterアカウントです。このアカウントに対してコマンドを実行することで、投げ銭や残高確認が行なえます。

  • Telegram telegram.me テレグラムのBotです。テレグラムといえば、ICOで自家製通貨をリリースしたことで有名ですね!

  • LINE
    https://line.me/R/ti/p/LT9i64cCqMline.me
    LINEにも公式Botがあります。宛先は実質指定できないのでBalance等に使用される感じらしい。

アカウントリンクのやり方

私も書いた記事はありますが、中の人のkazuさんも記事を挙げています

これらがアカウントリンクのやり方についてのTipsになります。

ツール

以下は私の作ったツールになります。これら、全部はブロガーさんや、YouTubeの動画投稿者向けの説明ですね。 投げ銭Twitterでも行えるため、そのリンクを生成します。

Twitterアカウントを入力して、作れます。QRコードも生成できます!(ここがでかい!)

私への寄付は以下のリンクから!TIPできます!!!

shinoharata.github.io

【MonaCoin】GPUマイニング GTX 980 vs GTX 1060(3G

こんばんわ。

先日GTX980を手に入れたので、その時のマイニングした結果について少し。

f:id:T_Shino:20171224202214j:plain

まず結論から言いますと、GTX 1060は素晴らしいです。980に迫る性能。
1060に関しては、先日入手しましたとの報告を以下の記事でしています。

t-shino.hatenablog.com

消費電力はGTX960ちょいぐらいなので、電力効率もいい。1080もおすすめらしいのですが、こちらはどうなのか・・・

早速搭載

f:id:T_Shino:20171224202227j:plain

こうして並べてみるとでかいですね。
960見たときもでかいかなぁって一瞬思いましたが、そんなもの比じゃないぐらいのでかさ。
で、1060よりも長いです。

これ、ZOTAC Amp! Editionとのこと。オーバークロックモデルです。

f:id:T_Shino:20171224202341j:plain

存在感がありますねー・・・w
1060とダブルで搭載してみます。

これを動かしたときのキニナル結果は・・・

 

 

 

f:id:T_Shino:20171224202425j:plain

 

24.5MH/s程度!!!

1060が23.5MH/s程度出てますので、そこまで高いとはいえませんね。
つまり、GTX 10xx系列が最強すぎるんですよ。

 

正直、GPUマイニングをしようとした時に9xx系列はもう完全に時代遅れなんですわ。
だって当時の最上位の性能を持つGPUが半値で出ているんですもん。

 

以上、参考までに・・・

【緊急】C-CEXからの送金不可?

[2017/12/17 0:26] 記事追記、修正

こんばんわ。緊急事態ですね。C-Cex最近ヤバイとのことで、BitZenyユーザーがCryptoBridgeへ皆移行しています。

先程、この自体を重く見たCryptoBridgeより、C-CEXからの受付が現在出来ませんとのツイートがされました。

Attention to all @CryptoBridge ZNY users withdrawing funds from @CryptoCurrEncyX C-CEX exchange - we're not receiving any incoming deposits from C-CEX, it seems they're on a fork. Please refrain from withdrawing from C-CEX until this matter is resolved.

英文ですね。

というわけで、日本語で。(Google先生

Google日本語訳】ZNYのすべてのユーザーがC-CEX交換から資金を引き出すことに注意する - C-CEXからの入金は一切受けていない。この問題が解決されるまで、C-CEXからの撤退を控えてください。

C-CEX側のネットワーク異常が発生している模様。
Twitterでも憶測が飛び交っているようで。

とりあえず、今のところは様子見、情報が出るまで待つしかなさそうです。