SKK日本語入力システムを使ってみました

昨日の夜,学校内のSlackで僕がこのまえ作ったオレオメーカーに「KKTだとレがタイプできない」っていうのが寄せられたんですよ.そんでKKTとはなんぞやと.

オレオメーカーについてはこちらを参照下さい

ten0313.hateblo.jp

どうやら日本語入力システムのひとつらしいぞと

dic.nicovideo.jp

ニコ百科が一番わかりやすかったです.

結構要約されている解説を僕がもっと噛み砕くと,いつも使っているキーボードの漢字変換や片仮名変換ってシステムが「形態素変換」という技を使ってスペースキーが押された時や変換キーが押された時に漢字に変えられたりしているらしいんですね.

でもまあ偶にシステム側が間違えたりすることあるじゃないですか,代表的なところでいうと「ここではきものをおぬぎください」だとか.

要はシステムがどこからどこまでを漢字にするか判断ミスすることがあるよねって話です.そこででてくるのがSKKです.

 

形態素変換を人力でやりましょう

って書くと仰々しいですね.いつも普段の我々がやっていることです.

どこからどこまでを変換するかをマシンの判断に委ねることなく人間がキーボードを打ちながら逐一コンピュータにここを変換してくれって指令をだしていく方式なんですね(なんか言い方マズかったらごめん).

早速タイピングしていきましょう

 

いざSKKを使ってみる

mlny.info

導入はこれがわかりやすかったです.がんばって.

まず前提条件として,SKKの変換にはShiftキーが大きく関わってきます.

最初に「雨上がりに虹が見えました」って打ってみますか.

 

「AmeaGariniNiji gaMiEmasita」これで打てているはずです.

まず「AmeaGa」,これで「雨上が」が出ますね.

Shiftキーを押しながらaで変換モードに移行,その後のShiftを押しながらのgで変換モードを終了させ自動的に変換されタイプ完了になります.

そのあとに続く「Niji」ですが,これはこれ単体で変換させたいので,なにかをShiftキーを押しながら打つこともなくスペースキーを押して変換モードの終了を行ないます.

「雨上が」とか,送り仮名を考える必要があるのとか,少しコツがいりますね.

 

片仮名平仮名の切り替えはqキーでできます.

アルファベットとか打ちたくなったら,変換モードじゃない時にlキーを,日本語に戻したくなったらCtrlとjキー同時押しでできます.

まとめ

正直まだ慣れていないです.

でも,多分これ慣れたらめちゃくちゃタイピング早くなるんじゃないかなってめっちゃ期待しています.

ニコニコ大百科で「Shiftキーを多用するので腱鞘炎マッハ」って言われてましたが,少し理解できそうです.今まで使っていたMozcが忘れられずつい癖で変換後にEnterを押してしまい無駄な改行が増えてしまうのは今の課題ですね.

後,BackSpaceキー横の¥キー押してしまうと「Kuten([MM]KKTT) 」ってなってしまうのってなんか対策ありませんか?

SKK,確実に英字キーボードの方が向いていると思うので購入も考えています.

 

この記事一本SKKで書いたのすごない?

 

 

[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com

好みのオレオが作れるWebサービス『オレオメーカー』を作った

久々に「何か作った」って題材でブログが書けるのが嬉しいです、神に感謝!!!

この前こんなツイートを見ました。

 めちゃくちゃ可愛い絵ですね。このオレオレオのアイデア(めっちゃ既出っぽいネタなに思えるんですけどやっぱり元ネタとかあるんですかね)

めちゃくちゃ気に入ったので好きにオレオを作れるオレオメーカーを作りました。

OREO.maker

これです。

 

遊んでみます

実際にリンク先のオレオメーカーを使って、僕直々に超危険なWebサービスであるオレオメーカーのスマートな使いこなし方を伝授しようと思います。

f:id:ten0313:20190104032931j:plain

まず、これはオレオです。

いいですね?基本がこれです。まずはオレオ。

f:id:ten0313:20190104034013j:plain

​一気に楽しくなってきました。これは何でしょう?

そう、オレレレレレレレレレレオです。オレレレレレレレレレレオ。

もうなんか大体オレオメーカーの使い方がわかってきましたか?

以上です。画面下部の小さなテキストボックスに"オ"もしくは"レ"をタイプすることで画面中央のボックスにオレオが形成サれていきます。

フリック操作、キーボード操作のどちらににも対応しています。

まとめ

ちなみにこのサービスは大晦日からさっきまでの約3日で作られました。

Reactで書かれ、Firebase上で動いています。

GithubPagesにデプロイしようともしたのですがnpm周りでごたつきめちゃくちゃめんどくさそうだったので断念しました。

いつも製作にまつわる技術関係のはなしをまとめに書いていたのですが、今回はめちゃくちゃ長くないそうなので別の記事にいろいろ書きたいとおもいます。

オレオメーカー、まだ共有機能とか全然なので適当にスクショするなりしてツイートでもしといてください。

OREO.maker

f:id:ten0313:20190104035824j:plain

ちなみに,これはオレレオレオオレレオレオオオレオオオ....

 

[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com

【reactJS】OpenWeatherMapAPIで天気の「予報」を取得する方法

この記事はギークハウス新宿界隈 Advent Calendar 2018の21日目の記事になる予定です。(僕の記事が3つ目!!図々しさ!)

 

アドカレに載せた記事たちです。よかったらどうぞ

ボードゲーム”カタン”の初期配置についての考察と戦術論 - 自由研究をします。

 

最近の進捗とか今住んでいるギークハウスというシェアハウスの紹介 - 自由研究をします。

 

 

最近reactでスマートミラーの画面上の部分を作っている日々って感じの生活を送っているのですが、やはり鏡の上から伝えたいことの一つとして「気象情報」が挙げられます。

そのため、reactで作るコンポーネントはもっぱらopenWeatherMapAPIを叩いて今の天気情報やら(「窓の外を見てみればいいじゃないか」という普段外に出ているアウトドアなマッチョの意見もあるかと思われますが週のうち数日外出すればマシなような僕みたいな引きこもりにとって、コンクリートジャングル生活の中でわざわざ窓を開けて外を確認しようにもビルの狭間なのでよくわからず外に出る気にもならないのでやはり天気把握機能は必要なのです)気温などの表示をさせる感じになっています。

APIからでてくる天気情報ですが、正しい値が取れているのかを確認するのが一番僕にとってネックでした。だって外にいちいち確認なんてできないですからね! スマホで検索して確認していました。

 

現在の天気でなく未来の天気、「予報」を取得する

現在の気象情報でなく、今日明日明後日の天気予報を取得したいな〜〜〜と思って(今考えたら明らかにそのJSONデータを取得する先で引き出せるわけがないのですが)何も考えずにいつも叩いていたのを呼び出しても案の定、現在の天気、その日の最低気温、最高気温、気温雲量湿度風向風量くらいしか出てこないんですね。

そのときに触っていたのがこれです。「現在の気象データ」が呼び出せます

openweathermap.org

おかしいと思ったんですよ!!! いつも叩いている「現在の気象情報」のAPIJSONデータの中身って

 

f:id:ten0313:20181221103522p:plain

明らかに数日分の気象データがはいってるって感じじゃないじゃないですか!!!!

おいおいおいおいお〜〜〜い!!!(銀魂のあのノリに影響されるキツイ女オタクのモノマネ)

こうすればいいですよ

これが公式のリファレンスです。

openweathermap.org

 

http://api.openweathermap.org/data/2.5/forecast?id=天気予報を取得した場所の都市IDをここに&APPID=ここにAPIキーを入力

これが正しいやつです。5日間の天気情報が3時間毎に取得できます。

https://samples.openweathermap.org/data/2.5/forecast?id=524901&appid=b6907d289e10d714a6e88b30761fae22

サンプルのJSONが表示されます。参考にどうぞ、2017年のモスクワのデータみたいです。

まとめ

なんかopenWeatherMapで現在の気象データの取得についての記事はWeb上でよく見かけるのに天気予報になると一気に情報量が減り、結局ボクも公式のリファレンスを読んで見つけた(最初から公式を読め)って感じで少し詰まっていたのでこの記事を書きました。

そういえばreactでHTTPリクエストする方法ですが、コンポーネント内でjQueryを呼び出したり(正直スマートだと思えないので好きでないです)XmlHttpRequestオブジェクトを利用する方法(以前はこれをしていました)などが有りますが、最近はaxiosというライブラリを使ってスマートにAPIからデータを持ってきています。

コード上の見た目でもわかりやすく使いやすいので、また今度記事として書いてみたいと思います。早く知りたい人はググってください。

 

それでは

 

ばいばい

 

[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com

 

ボードゲーム”カタン”の初期配置についての考察と戦術論

この記事はギークハウス新宿界隈 Advent Calendar 2018の17日目、9つ目の記事になる予定です。
僕はいま東京の新宿にある「ギークハウス新宿2」という、恵まれない子達を匿うシェルターで暮らしています、詳細と紹介の記事は以下でどうぞ

ten0313.hateblo.jp

 

んでまあ今年に入ってたくさんの新しいものに触れてハマったわけなんですけど、その一つが「ボードゲーム」でした。

なんかもう前置き疲れたので書いていきます

今からカタンにおける初期配置案について僕なりの考察とか考えを実際にゲームを配置したりしながら書いていきます。

先に言っておくんですけどあくまでボク個人の考えですし正解とかは他にもあると思います。あしからず。

まずは初期配置からです

f:id:ten0313:20181215102015j:plain

カタンの説明書にかいていた、初心者用の初期配置です。

多分「初心者たちは配置とか考えられないし公平な配置になるようにしてやるか」みたいなかんじで考案されたんでしょうね。まずはこの盤面を観察しながらどんなポイントがあるのか、この配置にはどんなメリットデメリットが存在するのか見ていきたいと思います。

f:id:ten0313:20181215102422j:plain

青プレイヤーの配置

まず、前提として「サイコロの目の出やすさ」を話します。カタンのルールで有利な行動ですが、簡単に言えば「よく出る数字のマスに建築すれば良い」です。それではどの数字がサイコロ2つのロールで出やすいのかと言うと「8,6」の数字です。

確率論がわからない人のために説明とかはしません。そういう人は妄信的に僕の書くことを信じてくれれば正解です。

「8,6」の2つの数字は確率的に一番出やすく、かつどちらも同じ確率で出ます。そのため数字の表記色も特別に赤く彩色されていますね。

出目の数字たちを出やすい順にならべると

  • 8,6(14%)
  • 5,9(11%)
  • 4,10(8%)
  • 3,11(6%)
  • 2,12(3%)

となります。横のカッコ内の数字はその数字の出目がでる大体の確率です。

青プレイヤーの配置を見ていきます。

目に付いた点を箇条書してみると

  • 8,6の赤い数字をとっています、木とレンガで、序盤から街道建設もどんどんできそうです
  • 4という微妙な数字で羊と岩をとっています。サイコロで出る確率は3番目に高い約8%、後半の都市化などの発展は苦しそうです。
  • 両植民地の間に白と赤のプレイヤーの建物があるので、つなげることで最長交易路(longest)をねらおうという動きをするのは難しそうです
  • あと一本伸ばせば5麦と4石の場所に配置することが可能です。後半戦もなんとか戦えるかも知れません

f:id:ten0313:20181215104055j:plain

すでに疲れてきました、次は赤の配置を見ていきます
  • 9,5,10と6っていうかなり良い数字をとっている
  • 岩とレンガと木と麦が潤沢に取れそう
  • 植民地周りに他プレイヤーの建築物があるので自由に道を伸ばしていくのはつらそう
  • 2つの植民地の間にほかプレイヤーの建物がないので、2つをつなげてしまうことで最長交易路争奪戦において、初期配置の街道を利用できるので少し有利になることができます

f:id:ten0313:20181215104436j:plain

僕はいつも白のコマを使いたがります、白を見ていきます
  • 8羊、10木、5麦と9レンガ、4岩がある
  • 木が潤沢に取れそうなので3:1港を利用した交換を利用していくのがいいかも
  • 今回は他プレイヤーが結構自分の領地で取れるものだけでほしいものとかが完結していそうなので「麦が以上に足りない!」とかに陥りにくそうですし、プレイヤー間での交換はそこまで活発にならなさそう

f:id:ten0313:20181215104909j:plain

橙プレイヤー
  • 唯一初期配置が海に面しています(言わずもがな最大3面まで資材をとることができるカタンのルール上、海に面した場所に初期配置するのはリスクがあります)
  • 全体的にとても良い数字が取れている。
  • 1本街道を伸ばせば5麦と6岩に建築できるようになります
  • 羊が少したりなさそうですが、4羊にもう一つ配置すればあるいは...?

 

はい。てな感じで見ていきました。

これを踏まえて僕の配置する上で考えることを挙げると

  • 3,11,2,12の数字マスは取らない。もしくはとれないという考えで行く

まずこれです。この数字マスはもはや無いとして考えてもいいと思います。

ここを取るくらいならもはや海に面した場所に置くほうがマシってくらいに思います。

初期配置を考えるならなおのことでしょう。ただでさえ「道を伸ばせるか...」とか「他プレイヤーはあそこに置くだろうから...」とか考えているのに2とか11とかそんなマスのことを考えてる暇はありません。思考の邪魔になりますしもう見ないふりをしましょう。なぜか他プレイヤーが置いた2マスや3マスからよく資源が取れることもありますがもはや誤差です!

思考から捨てたほうが良いと思います。(4のマスもできるだけ考えないほうがいいかもと思ってます)

  • 全体的に見て、資源の相場を鑑定する

さっき「2,3,11,12のマスは無いものと考えて」っていいましたね。アレは実は嘘です!本当は初期配置時にめちゃくちゃ見てほしいです。

というのも「2,3,11,12のマスの資源は後々みんなが欲しがる資源」だからです。もし、3,12のマスにレンガがあり、もう一つのレンガが4にあればかなり積極的に取りに行きましょう。カタンにおいてみんなが欲しがる資源を確保するのはゲームを支配するのと同義だと思います。他プレイヤーとの交換でも有利になれますし、あえて交換を止めることで他プレイヤーの進行を妨害させることもできます。

それによってあなたがヘイトを買い、だれもあなたと交換してくれなくなったとしてもなにが困りましょう!?あなたはもうレンガに困らないのですから!!

  • 初期配置で、港貿易を考えて配置するのはやめる

「最悪ここに港があるからここに建てておくか...」みたいな抽象的な夢を持って港近くに立てるのはやめましょう。人の思惑が絡むプレイヤー間の交換というシステムがある以上、カタンで「いずれこれが余るだろうからこの港近くに植民地建てよう」は危険だと思っています。

「木のいい数字のところが二箇所取れてるし木の交換港とっておくか」っていう絶対的な根拠のもとの初期配置は大歓迎だと思います。港貿易をすることで他プレイヤーとの交換で有利ですし、港貿易のみに交換を絞れば他プレイヤーに特定の資源を行き渡らせないようにもできます。

  • 2つの植民地のつながりに注意する

最長交易路のためのはなしです。

5本以上伸ばしており、かつ誰よりも長い一本道を建設しているプレイヤーが持てる特典カード「最長交易路」。もしあなたが木とレンガの場所をとっていて、最長交易路を狙えそうであれば初期配置時にできるだけ2つの植民地を繋げれるようにしてみるのも良いかも知れません。初期配置の街道と植民地は無償で設置できます。2つの植民地をつなげることで、つなげていないプレイヤーよりも低コストで長い街道路を建設できることにつながります。ひとつ考えて見る余地のあるやつです。

 

実際の配置で考えてみます

なんかもう説明疲れました。

いまからは本番のゲームを想定して、ランダムで盤面を配置して植民地をどこに置くか示してみます。

f:id:ten0313:20181215113114j:plain

もちろん本番は他のプレイヤーも置いてきますし上手く自分の置きたいところ

置くくなんて難しいですがそれはおいておいて

1つめの盤面はこんな感じです。僕だったらこの赤の場所に置きます。まずこの盤面の特徴として

  • レンガが絶望的に取りにくい
  • 木が余りがでやすい(つまりたくさん産出される)
  • 麦も少なくなりそう

これを踏まえた上での配置です。

考えとしては、写真右の8レンガは何がなんでもとっておきたいので10岩との間に配置。1本道を伸ばせば唯一取れない木も9木で取れるようになる。

6羊、10岩、9麦はあまりにも魅力的、3つを取れるように置く。

って感じです。序盤からの展開としては、レンガをもとに交換して木をゲット、道をつくり9木に配置させる。

もしくは10岩9麦をもとに植民地2つを都市化していく流れ。この2つの手があります。僕だったら都市化の案で行きますかね。目立ってしまいますし、9木に届きにくいという難点はありますが、木は他プレイヤーがどんどんとってくれるでしょうし彼らの欲しがるであろうレンガを保有しやすいのは8レンガを持つ自分含めるプレイヤーです。交換は有利だと思います。

この2つの植民地の初期位置ですが、優先度は右のレンガが取れる方だと思います。ソレほどまでに産出する可能性の低い資源のマスは優先して配置するべきです。

 

 

f:id:ten0313:20181215114955j:plain

少し安直な考えですがこういう置き方がしたいです。まあでも普通こんなふうに他プレイヤーは取らせてくれませんし、どちらの方を優先して置くか決めましょう。僕は右です。とりあえず道は簡単に作れます。

荒れ地が端に位置した盤面の場合、プレイヤー達の配置する植民地ないし都市は自ずと3つの資源マスに位置することが多くなり各プレイヤーの持ち資源は多くなり不足は少なくなります。このような状況で交易港は他のプレイヤーに資源を渡すことなく低コストで交換ができるようになるという点で強力になります。右の赤植民地の場所近くのレンガの交易港にアクセスしやすいという点で右のほうが優先度は高いかと思いました。

道が伸ばしやすいということは新しく植民地を作りやすいということにつながります。

2つめに置くのはできるだけ麦か羊(ここはできれば麦を優先させたいです。というのも、このゲームで羊と麦ならば麦のほうが使う機会が多く重要だからです)をとれるように配置しましょう。

 

f:id:ten0313:20181215120317j:plain

さっきとは異なり、荒れ地が真ん中に位置しています。この場合、プレイヤーの建築物が3面の資源マスに面することは困難になります。

僕がより配置したいのは右下の方です。今回の盤面の特徴として、荒れ地が真ん中に位置していることともう一つ、羊の取れる確率が低いことです。

一番で安い出目の数字でも9しかありません。

が、しかし、ソレは考慮しません。羊なんてこの際考えないでおきましょう。

とりあえず5レンガと8麦10木をとって、交換や盗賊で取れたときのために道を引いて羊以外の植民地用の材料を持って待機しておきます。もし建てれるタイミングが来たら道を上に伸ばし6岩を狙います。

羊がいらないと書いた理由ですが、使えるタイミングが少ないことです。植民地建設と発展のためだけにしか使わない羊のことは、ときに切り捨ててもいいと思います。

ここで注意なのですが、羊を切り捨てる以上、どうしても無理になる戦法があります。即都市化に切り出すやつです。都市化を進めてポイントを得ていく方法ですが、難点は都市化した結果ソレ以上ポイントを獲得する方法が発展カードによるものに頼らざるを得なくなる点です。羊を切り捨てるうえで都市化をガンガン推し進める戦法は得策ではありません。この盤面で都市化の作戦をするのは無謀だと思います。

2つめは取れたら右上のような木とか羊を取れたら良いですね。できたらひつじとかも?(でも無理して4羊とかを狙うのはNGです)

 

まとめ

なんかもういろいろ書いて疲れました!

僕は人よりカタンというゲームが強い自信があるので今回こんな記事を書いたのですが、独りよがりと言うか変な考えだったら申し訳ないです。

来週あたりギークハウスでカタン大会があるみたいですが、ぼこぼこにされたら笑ってください。

カタンというゲームに置いて重要なことの3割くらいを初期配置選びが占めていると思っています。勝ちを狙いに行くならとことん考えましょう。

(重要なことの残りとしては、2割がゲームプレイ、3割が勝利を諦めないこと、1割が記憶力とブラフ、残りは「普段の行いと人望と信頼」です。あともう一つ重要なことを挙げるなら、「狡猾さ」というか勝つためにどんなことでもするっていう野心ですね)

 

最近の進捗とか今住んでいるギークハウスというシェアハウスの紹介

編集

この記事はギークハウス新宿界隈 Advent Calendar 2018の13日目、4つ目の記事になります。よろしくおねがいします。

 

前日の記事です

猫が可愛いお話とかゲームが楽しいお話とかその他諸々 -

最初の3行くらい読んだらページバック推奨です。

requireの件ですが、カコハテくんにJSについての学びの機会を与えてやろうという僕なりの老婆心あふれる思いやりの気持ちでした。

 

新宿界隈のアドカレ登録の際は「ツイッターAPIを叩いて面白いおもちゃ作るぞ〜〜〜〜」なんて考えてたんですけど、なんか記事の公開が明日に迫っているというのに何も手をつけていません、やばいですね。なのでおもちゃづくりは別の記事にて書くとします。

 

とりあえずとしてまずは僕の住んでいるギークハウスについて他住民にプライバシーに気をつけつつ現在午前三時ですが、探検しつつ紹介しようと思います。

 

僕の今住んでいる場所はギークハウス新宿2というシェアハウスで、奇抜な飲み屋やSMバー、AVショップが立ち並ぶ通りのすぐ横に位置しています。

探検です

f:id:ten0313:20181212025132j:plain

 

僕がいつも陣取っているリビングの席です。E-10プリデターミニッドシート(E-10のための席)と住人から呼ばれています(という妄想です)。

飲み終えてたり飲み残してたりしたエナドリの缶やら食べている途中のご飯やらがのこって趣ある風景になっていますね、そろそろ怒られそうなので片付けようと思います。

f:id:ten0313:20181212025531j:plain

E-10プリデターミニッドシートのすぐ後ろはテレビとソファがあります。

 

ギークハウス新宿2、通称ぎー2の住民はここでゲームをしたりネットフリックスで映画を見たりゲームをしたりテレビを見たりします。あとゲームもよくします。

今日はさっきまではカコハテくんやにゃまざきさんがゲーム配信をしていたりして毎日なんらかのイベントがこのリビングで起こってたり起こってなかったりします。

 

映画は最近「SAW」シリーズを見ました。FINALは正直途中から寝ていました。

 

f:id:ten0313:20181212030450j:plain

 

リビング壁面に置かれている住人たちの日常品が入ったコンテナです。僕のは大して重要なものも食料品も入ってないはずなのに溢れかえってます。ずさんさがわかりますね。

 

f:id:ten0313:20181212030615j:plain

オーナーさんから無料提供されている米です。管理は結構適当で、99時間保温されていた米が発見されたこともあるらしいですね。いいものが見れましたね。

 

f:id:ten0313:20181212030736j:plain

冷蔵庫です。カンファレンスなんかで「ほら、お前らはシールあげたら喜ぶんやろ?」と配布してくれるステッカーたちをマグネットシールに貼り付けてかっこよくしてあります。

 

f:id:ten0313:20181212030844j:plain

明日作ろうとしている親子丼のために下付けしてある鶏肉です。

 

f:id:ten0313:20181212030924j:plain

廊下には技術書が並びます。

 

f:id:ten0313:20181212030946j:plain

階段を登って...

 

f:id:ten0313:20181212031009j:plain

風呂場があります。僕は最近フォールアウト76というゲームにハマっているのですが、そのゲーム中に出てくる風呂場のモデルになったと言われている風情のあるお風呂場です。

 

f:id:ten0313:20181212031241j:plain

 

僕の寝ている部屋です。今の所同じ部屋にはカコハテと僕のふたりが寝ています。

他の部屋と違い、暖房がないので寒いです。多分この冬中に僕かカコハテのどちらかがどちらかの凍死体を解凍しなければいけないことになると思います。

f:id:ten0313:20181212031331j:plain

睡眠しながらスマホをいじるカコハテです、器用ですね。

何をしているか聞くと「アニメ見てる」と寝言で返してくれました。ヲタク(笑)ですね。

f:id:ten0313:20181212031551j:plain

僕のベッドです。いろいろ増えました。

f:id:ten0313:20181212031623j:plain

ベランダから見た新宿2丁目です。今日は平日なのと雨なので人通りは少ないですが、休日の夜は国籍性別問わず多くのお猿さん達が交尾の相手を求めて踊っています。

あまり知られていませんが、新宿2丁目は都会のジャングル、残された動物たちのオアシスだったのです。

 

紹介は異常です。

最近していること

reactでいろいろしています。JavaScript、わけわかんないながらも日々成長というかわかることが増えていっています。

React.JSの"this.setState is not a function"のエラー文にたいする対処

最後にいい感じのことを書こうかなと。

このエラー、まあいろいろな理由があるとは思うのですが、僕の場合は

onreadyatatechangeelementからの関数内でthis.setStateをしようとして詰まっていました。

この場合の理由は単純で、"this.setState"のthisが本来指し示したかったReactのコンポーネントまでではなく、ソレ以前のnew XmlHttpReaquestしたオブジェクト内を示してたみたいでした。console.log(this);を試しにしてみたら良いかもです。

解決方法としては、setStateをした関数自体の直後に".bind(this);"をつけて指し示したいthisを関数外のものだよってかんじで明記すると(認識合ってるのかな...)いい感じになるかもです。

 

まとめ

年末に入っていきなりJSやらなんやらと触れだしたのですがなかなかに楽しいですね。

ブログ記事更新もまた再開していこうと思います。今年ももう暮れですか、早いですね。年末年始はカコハテをお土産にして帰省したいと思っています。

そんなこんなで僕はカフェイン中毒に怖がったり昼夜逆転したり昼夜逆転しすぎて昼夜逆転逆転したりと愉快に過ごしています。

来年は高校の卒業(予定)ですし僕はどうなるんでしょうかね

 

 ぼくのAmazonほしいものリストです。見るだけで抱腹絶倒間違いなしですねえ

 

ばいばい

 

[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com

最近の進捗とか今住んでいるギークハウスというシェアハウスの紹介

この記事はギークハウス新宿界隈 Advent Calendar 2018の13日目、4つ目の記事になります。よろしくおねがいします。

 

前日の記事です

猫が可愛いお話とかゲームが楽しいお話とかその他諸々 -

最初の3行くらい読んだらページバック推奨です。

requireの件ですが、カコハテくんにJSについての学びの機会を与えてやろうという僕なりの老婆心あふれる思いやりの気持ちでした。

 

新宿界隈のアドカレ登録の際は「ツイッターAPIを叩いて面白いおもちゃ作るぞ〜〜〜〜」なんて考えてたんですけど、なんか記事の公開が明日に迫っているというのに何も手をつけていません、やばいですね。なのでおもちゃづくりは別の記事にて書くとします。

 

とりあえずとしてまずは僕の住んでいるギークハウスについて他住民にプライバシーに気をつけつつ現在午前三時ですが、探検しつつ紹介しようと思います。

 

僕の今住んでいる場所はギークハウス新宿2というシェアハウスで、奇抜な飲み屋やSMバー、AVショップが立ち並ぶ通りのすぐ横に位置しています。

探検です

f:id:ten0313:20181212025132j:plain

 

僕がいつも陣取っているリビングの席です。E-10プリデターミニッドシート(E-10のための席)と住人から呼ばれています(という妄想です)。

飲み終えてたり飲み残してたりしたエナドリの缶やら食べている途中のご飯やらがのこって趣ある風景になっていますね、そろそろ怒られそうなので片付けようと思います。

f:id:ten0313:20181212025531j:plain

E-10プリデターミニッドシートのすぐ後ろはテレビとソファがあります。

 

ギークハウス新宿2、通称ぎー2の住民はここでゲームをしたりネットフリックスで映画を見たりゲームをしたりテレビを見たりします。あとゲームもよくします。

今日はさっきまではカコハテくんやにゃまざきさんがゲーム配信をしていたりして毎日なんらかのイベントがこのリビングで起こってたり起こってなかったりします。

 

映画は最近「SAW」シリーズを見ました。FINALは正直途中から寝ていました。

 

f:id:ten0313:20181212030450j:plain

 

リビング壁面に置かれている住人たちの日常品が入ったコンテナです。僕のは大して重要なものも食料品も入ってないはずなのに溢れかえってます。ずさんさがわかりますね。

 

f:id:ten0313:20181212030615j:plain

オーナーさんから無料提供されている米です。管理は結構適当で、99時間保温されていた米が発見されたこともあるらしいですね。いいものが見れましたね。

 

f:id:ten0313:20181212030736j:plain

冷蔵庫です。カンファレンスなんかで「ほら、お前らはシールあげたら喜ぶんやろ?」と配布してくれるステッカーたちをマグネットシールに貼り付けてかっこよくしてあります。

 

f:id:ten0313:20181212030844j:plain

明日作ろうとしている親子丼のために下付けしてある鶏肉です。

 

f:id:ten0313:20181212030924j:plain

廊下には技術書が並びます。

 

f:id:ten0313:20181212030946j:plain

階段を登って...

 

f:id:ten0313:20181212031009j:plain

風呂場があります。僕は最近フォールアウト76というゲームにハマっているのですが、そのゲーム中に出てくる風呂場のモデルになったと言われている風情のあるお風呂場です。

 

f:id:ten0313:20181212031241j:plain

 

僕の寝ている部屋です。今の所同じ部屋にはカコハテと僕のふたりが寝ています。

他の部屋と違い、暖房がないので寒いです。多分この冬中に僕かカコハテのどちらかがどちらかの凍死体を解凍しなければいけないことになると思います。

f:id:ten0313:20181212031331j:plain

睡眠しながらスマホをいじるカコハテです、器用ですね。

何をしているか聞くと「アニメ見てる」と寝言で返してくれました。ヲタク(笑)ですね。

f:id:ten0313:20181212031551j:plain

僕のベッドです。いろいろ増えました。

f:id:ten0313:20181212031623j:plain

ベランダから見た新宿2丁目です。今日は平日なのと雨なので人通りは少ないですが、休日の夜は国籍性別問わず多くのお猿さん達が交尾の相手を求めて踊っています。

あまり知られていませんが、新宿2丁目は都会のジャングル、残された動物たちのオアシスだったのです。

 

紹介は異常です。

最近していること

reactでいろいろしています。JavaScript、わけわかんないながらも日々成長というかわかることが増えていっています。

React.JSの"this.setState is not a function"のエラー文にたいする対処

最後にいい感じのことを書こうかなと。

このエラー、まあいろいろな理由があるとは思うのですが、僕の場合は

onreadyatatechangeelementからの関数内でthis.setStateをしようとして詰まっていました。

この場合の理由は単純で、"this.setState"のthisが本来指し示したかったReactのコンポーネントまでではなく、ソレ以前のnew XmlHttpReaquestしたオブジェクト内を示してたみたいでした。console.log(this);を試しにしてみたら良いかもです。

解決方法としては、setStateをした関数自体の直後に".bind(this);"をつけて指し示したいthisを関数外のものだよってかんじで明記すると(認識合ってるのかな...)いい感じになるかもです。

 

まとめ

年末に入っていきなりJSやらなんやらと触れだしたのですがなかなかに楽しいですね。

ブログ記事更新もまた再開していこうと思います。今年ももう暮れですか、早いですね。年末年始はカコハテをお土産にして帰省したいと思っています。

そんなこんなで僕はカフェイン中毒に怖がったり昼夜逆転したり昼夜逆転しすぎて昼夜逆転逆転したりと愉快に過ごしています。

来年は高校の卒業(予定)ですし僕はどうなるんでしょうかね

 ぼくのAmazonほしいものリストです。見るだけで抱腹絶倒間違いなしですねえ

 

ばいばい

 

[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com

モバイル向けにアクセシビリティを考えたメニューバーを思いついた作ってみた

最近,UIやらUXやらとデザインを考えることが多くなりそれ系の記事を読み漁ってるんですけど結構おもしろいですね

親指リーチ範囲

ってわかりますか.わかりませんか.まあ簡単に言うと「スマートフォンって片手で操作する時,手の大きさとか操作する指の範囲とか考えたら(右利きで右手のみでスマホを持って操作している場合)押さなければいけないボタンとかが左上にあるのは(指が届きづらいので)操作性というかアクセシビリティが悪いのではないか」って言う考えのアレです.

別に片手操作に限らないのですが,両手持ちだろうと画面の下の方と上のほう,操作しているときにスッと指が届くのは多分下の方だと思います.

近年巨大化する傾向のあるスマートフォンを始めとしたモバイル系のデバイスのディスプレイでの表示を考えるとやっぱり親指リーチ範囲を意識した表示デザインの設計は必須だなあと思っています.

www.gizmodo.jp

2014年の記事ですが,とてもわかり易くまとめられていて良さでした.

まあ今は2018年ですし(2019?)スマホの大きさは巨人向けかってくらいになっているので正直片手のみで扱うより片手で支えながらもう片方の手で操作する形式が多くなっているのかもなあっても思ってたりします. まあ今回はその話は置いておいて.

大手サービスで親指リーチ範囲を考えてデザインされている例

実際意識しているのかはわからないのですけど,

この考え方に即したデザインになっているサービスのモバイル画面を例に出します.

f:id:ten0313:20181112212218j:plain

Googleのマップアプリです.検索バーこそ上の方にありますが,経路検索のためのボタンや「おすすめ」「通勤」「周辺のスポット」などのボタンが右下から下にかけて配置されています.

 

f:id:ten0313:20181112212500j:plain

みんな大好きTwitterの公式クライアントアプリ画面です.ツイートボタン,そして他の表示切り替えボタンが下に配置されています.もっともこの切り替え自体は画面を横スワイプすることで切り替えられるようにもなっています.

 

f:id:ten0313:20181112212728j:plain

slackアプリのやつです.投稿系統のボタンや切り替えが右下から下にかけて配置されています.

 

本題に移るんですけど

長々と親指リーチ範囲を考えたアクセシビリティの高い表示デザインについて書いてきたんですが,やっと本題に移ろうと思います.

僕の考えた最強のモバイルデバイス向けメニューデザイン

です.

f:id:ten0313:20181112213341j:plain

 

スケッチです.説明すると通常はスケッチ下のボタン一つの状態なんですけど,ボタンを押すことでデザイン上のようにメニューボタンが展開され様々なボタンが使えるようになるって感じです.

もちろん展開されたメニューボタンたちはまた格納できるようにしますし再展開も可能です.

作ってみました.

スピード感ってのを意識しようと思って20分くらいでぱぱっと「誰かにこの機能を理解してもらえる」レベルくらいのを作りました.HTMLとCSSのみでの実装です.

palette-menu

はいどうぞ.スマートフォンで開いてください,PC対応はしてないですしスマホでもサイズによって形が崩れるかもしれません.

f:id:ten0313:20181112215150j:plain

緑の丸をタップすることで

 

f:id:ten0313:20181112215226j:plain

各ボタンが展開されてタップできるようになります.再度緑のTouch!ボタンをタップで展開されたボタンたちが消えるようになっています.

このサンプルとして作ったものの展開されたボタンには僕のブログやGitHubへのリンクを貼り付けていますが,何かのサービスで実装するときは各サービスに合わせた機能なりリンク先にすればいいのではと思います.

まとめ

ここで言うべきではないのですが,今回作ってみた機能が目指したのは「すべての機能へのリンクを右下に集約する」よいうことです.

さっき例に出したTwitterクライアントだってツイートボタンこそ右下にありましたが,

自分のプロフィールなど設定をするには左上の自分のアイコンまで指を伸ばす必要があります.

右下にある方がアクセシビリティは高くなりますが,その分機能が密集することで逆にユーザビリティが下がることも危惧されます.

それを考えた上で「せや!使わないうちは機能たちを格納できるようにして右下にあつめたろ!」というのが僕の思いつきでした.

欠点として

・初見でわかりにくい

格納されているうちはその展開されたあとの状態が見れないので直感的に自分の行き着きたい機能までたどり着けにくい

  • 左利きにつらい

もちろん位置を反転させればいい話なのですが,その切り替えや反転したデザインの実装も必要になります.

  • そんなに機能がない場合おしゃれなゴミと化す

今回はサンプルとして展開されるメニューボタンが3つでしたが,正直3つだと普通に右下から下にかけて配置したほうがわかりやすく実装も楽です.

この展開型のデザインが効果を発揮できるのは最低でも4つから5つ以上の展開するボタンの数がある場合だと思います.

 

展開されるモーションもフワッて浮き上がるのでなくにょきにょきって動くほうが好みって声もありました.僕もそう思います.

 

サンプル例として後ろの文章を(何でもよかったのですが)僕の好きなWikipedia記事の「ヒットラー女性化計画」にしています.ぐぐってみたら面白いと思います.

 

ばいばい

 

[ この記事はブログ投稿者の憶測や考えによりつくられています。

よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]

 

twitter.com

ReactJS帰省アドベントカレンダー【三日目】

とりあえず一日の終わりにその日覚えたことを羅列しようとするのはやめます

覚えていないので(正確には、覚えてないと言うより自分が何を覚えたのか覚えてないと言う感じですが)

なので何か新しいことを覚えたり確認するたびにバーって書いていきたいと思います。

明日から

JSXを触り始めました

いや、いつ出てくるのかな〜〜って感じで本を読んでいったのですが四章でやっとこさ「いままでややこしいrenderなんとかをご苦労様〜〜、あれ?まだJSX使ってないの?JSX童貞が許されるのなんて中学生までだよね〜〜」みたいな感じで紹介されるので(実際にHTMLライクな書き方ができるJSXは見ていて馴染み深く、書いていても読んでいても分かりやすかったです)怒りを覚えました。

  • defaultValueを知った

要はhtmlで言うvalueのもっと詳しいと言うか何と言うか...最初からの不動的なもの?

react側でdefaultValueプロパティで設定したものは、中身がその後変更されようとtarget.defaultValueで呼び出すことができる...説明がむずかしいので深く理解はできてないみたいです。

XSS攻撃への対策ですが、reactって予め入力された文字列はすべてエスケープされるんですね。少し感動しました(もしかしてこれって常識だったりするんでしょうか)

reactと関係ないことなんですが、少し操作に慣れてきました。

たしかに手の移動が少なくなるのは良いですね。親指の腹がトラックパッドに当たって誤クリックや誤操作してしまうのが嫌で「トラックパッドの検出」をなくしたのがトラックポイントのみのマウス操作を強いられる状況を作る縛りプレイ的なことになったのもトラックポイント操作上達のコツ(?)になったのかもしれません

 

ね、夜中に今日やったことを思い出そうなんて無謀にもほどがあるんですよ

明日からは備忘録的にもいちいちブログの書き込みページに書いて置きたいと思います

ばいばい