【Java】@FunctionalInterfaceを使ってみる

wrongwrong163377.hatenablog.com
今更ですが、↑の内容ならFunctionalInterface使った方が楽な場面も有るかな?と思ったので書きました。

使い方

全部まとめ

これ以降で書く内容を全部まとめたクラスが以下です。

public class Main {
    @FunctionalInterface
    interface FunctionPointer {
        void helloWorld(String subject, String name);
    }

    private static void helloFromFunction(String subject, String name, FunctionPointer functionPointer){
        functionPointer.helloWorld(subject, name);
    }

    private static void hello(String subject, String name){
        System.out.println("Hello " + subject + ", I'm " + name + ". ");
    }

    public static void main(String[] args) {
        helloFromFunction("world", "wrongwrong", (subject, name) -> System.out.println("Hello " + subject + ", I'm " + name + "."));
        helloFromFunction("world", "wrongwrong", Main::hello);
    }
}

以下実行結果。

Hello world, I'm wrongwrong.
Hello world, I'm wrongwrong. 

Process finished with exit code 0

インターフェースを用意する

↓のような、@FunctionalInterfaceアノテーションを付けたインターフェースを適当に用意しておきます。
今回は関数ポインタ的なものを意識したのでFunctionPointerという名前を付けましたが、インターフェース名もメソッド名もちゃんとつけられます。

@FunctionalInterface
interface FunctionPointer {
    void helloWorld(String subject, String name);
}
用意したインターフェースを使う

用意したインターフェースは、以下のような形で書くことで、実装を受け取って利用することができます。

private static void helloFromFunction(String subject, String name, FunctionPointer functionPointer){
    functionPointer.helloWorld(subject, name);
}

今回はvoidメソッドで利用しましたが、当然戻り値の有るインターフェースも実装できます。

使う

先ほど作成したhelloFromFunctionに実装を渡して使っていきます。

ラムダ式で使う

以下のように、helloFromFunction関数へラムダ式を渡すことで使えます。

helloFromFunction("world", "wrongwrong", (subject, name) -> System.out.println("Hello " + subject + ", I'm " + name + "."));

helloFromFunctionsubjectにworld、nameにwrongwrongを渡しています。
ここで、ラムダ式では(subject, name) -> ...と引数の型が略されています。
これは最初に用意したFunctionPointerインターフェース内でhelloWorld(String subject, String name)と型名を指定しているため、改めて書く必要は無いということでの省略です。

関数で使う

以下のように、インターフェースの共通する(この場合String2つを引数に取るような)関数を用意します。

private static void hello(String subject, String name){
    System.out.println("Hello " + subject + ", I'm " + name + ". ");
}

この関数は、以下のような形でhelloFromFunctionに渡すことができます。Main::helloとなっていますが、これはhello関数をMainクラスに実装していたためです。

helloFromFunction("world", "wrongwrong", Main::hello);

感想

@FunctionalInterfaceは自分で使う分にも使い道が多そうですね(色んな場面で散々使ってたはずなのに実態を意識していなかった……)。

参考にさせて頂いたページ

qiita.com

【レビュー】MSI PS42 Modern レビュー

 MSI PS42 Modernを買ったので、軽くレビューをしていきます。

買った理由

PS42 ModernはGPUとして1050(Max-Q)を搭載し、その上13型のPCと同等のサイズの筐体と、軽くてコンパクトでハイスペックだからです。
購入目的は外出時のプログラミングとゲームなので、まさに「これしか無かった」です。
同じようなスペックのノートPCをいくつか比較して*1みると、PS42の圧倒的なコンパクトさが分かります。

スペック PS42 GS43 P34G v7 AERO 14 Razer Blade RZ09 GS32
パネルサイズ 14 14 14 14 14 13.3
322 345 340 335 345 320
222 245 239 250 235 227
厚さ 15.95 22.8 20.9 19.9 17.9 19.8
重量(バッテリー込) 1.19 1.8 1.69 1.89 1.86 1.2

勿論、コンパクトでも性能は劣りません。

使用感

良かった点

実物を見ても、ACアダプタ含めとにかくコンパクトで、スペックも期待通りでした。
ACの給電力は90Wです。たった90Wでゲーミングノートが動く時代なんですね……。
求めてはいなかった点ですが、スピーカーの音質も割としっかりしている印象*2です。
デザインも超かっこいいですね。銀色の背面がとても上品で、カフェなんかで使っていても意識高い感じを演出していけると思います。ただ、個人的にはMSIのゲーミングノートの黒赤が好きだったので、できればそっちのデザインも欲しかった所ではあるんですが……。

悪かった点

キーボードレイアウトが壊滅しています。トラックパッドもちょっと面積が狭いです。
トラックパッドに関してはしょうがない気もしますが、キーボードレイアウトはもうちょっと使用感を考慮してほしかったですね……。見栄えは良いのですが、とにかく誤爆しやすいのと、誤爆した時に影響が大きいのがキツいです。
というか先代のGS32の時は割とちゃんとしてたのに、これは改悪だと思います。
後、これはちょっと難しいことだったのかもしれませんが、給電はUSB3.1 Type-Cにしてほしかったと思います。
ACの給電は90Wで、USB PDの給電の上限の100Wは下回っていますし、できないことはないと思うんですが……。それとも、もっと上位のGPUを積んだ製品を投入する予定が有るのでしょうか?後日「そもそも100W給電に対応できる製品は現状少ない」ということを教えていただきました。

まとめ

筐体のコンパクトさやスペックは十分なので、長く使っていけると思っています。
スペックの割に安いですし、かなり良い製品です。
ただ、キーボードに関してはもうちょっと改善がほしいなと思います。

おまけ

開封画像

汚くて恐縮ですが開封時の画像です。
f:id:wrongwrongwrongwrong163377:20181104210708p:plain
f:id:wrongwrongwrongwrong163377:20181104210843j:plain
f:id:wrongwrongwrongwrong163377:20181104210936j:plain
f:id:wrongwrongwrongwrong163377:20181104211218j:plain
f:id:wrongwrongwrongwrong163377:20181104211252j:plain

ベンチマーク

何も調整しないでスコアを出したので、ちょっと低めに出ています。
f:id:wrongwrongwrongwrong163377:20181103193503p:plain
f:id:wrongwrongwrongwrong163377:20181103192443p:plain

*1:この表は以前書いた記事を弄ったものです

*2:比較対象がクソ音質のノートPCなのでアレですが……

【HTML/CSS】JavaScriptで新しいタブを開き、そこからPOSTを送る【JavaScript】

以下のような動作がしたかったのですが、1, 2をやるようなコードが落ちてなかったので作りました。

  1. 新しいタブを開く
  2. 開いたタブからPOSTを送信する
  3. 戻ってきたwebページを表示する

内容的には新しいタブをtargetに指定してpost結果を表示するというのが正しいですが、やりたかったことベースでこのタイトルにしておきます。
というか無理やりJSで書いてますが、HTMLに新しいタブをtargetにしたformを用意しておいた方が簡単で処理も少ないような……。

ソースコード

このコードを呼び出すと、新しいタブで株式会社ネットアクティビティ様のHTTPアクセス POST送信 テスト確認用ページへ向けてPOSTを送信します。
サンプルなのでちょっと冗長に書いてます。

//フォームとwindowに設定する識別子
let form_id = 'temp-form';
let window_name = 'new_window';

window.open('', window_name); //新しいタブを開く
let form = document.createElement('form'); // フォーム要素を宣言
form.action = 'https://www.muryou-tools.com/test/aaaa.php'; // 投げる先のURLを設定
form.method = 'post'; // GETかPOST、今回はデータを送りたいのでpost
form.style.display = 'none'; // 要素を画面に表示しない
form.target = window_name; // 新しいタブがターゲット
form.id = form_id; // 後で消すためにID指定
document.body.appendChild(form); // HTMLのbody要素に作ったform要素を追加

//input要素作成、今回は2つ作る
let input1 = document.createElement('input'), input2 = document.createElement('input');
input1.type = input2.type = 'hidden';
//要素名と値を追加
input1.name = 'hoge';
input1.value = 'fuga';
input2.name = 'hello';
input2.value = 'world';
//form要素に作ったinput要素を追加
form.appendChild(input1);
form.appendChild(input2);

// 送信
form.submit();
// 後始末で削除
document.getElementById(form_id).remove();

解説

HTML5のformの機能を使って送信しています。処理の流れは以下。

  1. 新しいタブを開く
  2. JavaScriptで送信用にform要素を作り、htmlのbodyに追加
  3. 送信したい内容をinput要素に入れる
  4. 新しいタブをターゲットにしてsubmitを呼び出し
  5. htmlから、追加したform要素を消す

サンプル

以下の「ボタン」と書かれた緑の領域をクリックすると、POSTの結果が見られます。

ボタン

送信結果は以下。
f:id:wrongwrongwrongwrong163377:20181031221831p:plain

サンプルのソース

サンプルをHTMLとして独立させた内容です。

<!DOCTYPE html>
<html lang="ja">
    <meta charset="UTF-8" ;>
    <body>
        <p style="width:100%; height:100%; background-color:green; color:white; cursor: pointer;"
           onclick="
                let form_id = 'temp-form';
                //フォームとwindowに設定する識別子
                let window_name = 'new_window';
                window.open('', window_name); //新しいタブを開く
                
                let form = document.createElement('form'); // フォーム要素を宣言
                form.action = 'https://www.muryou-tools.com/test/aaaa.php'; // 投げる先のURLを設定
                form.method = 'post'; // GETかPOST、今回はデータを送りたいのでpost
                form.style.display = 'none'; // 要素を画面に表示しない
                form.target = window_name; // 新しいタブがターゲット
                form.id = form_id; // 後で消すためにID指定
                document.body.appendChild(form); // HTMLのbody要素に作ったform要素を追加
                
                //input要素作成、今回は2つ作る
                let input1 = document.createElement('input'), input2 = document.createElement('input');
                input1.type = input2.type = 'hidden';
                //要素名と値を追加
                input1.name = 'hoge';
                input1.value = 'fuga';
                input2.name = 'hello';
                input2.value = 'world';
                //form要素に作ったinput要素を追加
                form.appendChild(input1);
                form.appendChild(input2);
                
                // 送信
                form.submit();
                // 後始末で削除
                document.getElementById(form_id).remove();
        ">ボタン</p>
    </body>
</html>

おまけ

document.getElementById(form_id).remove();を呼び出さず、formを消さないままで居ると以下のようになります。formがどんどん積み重なってしまっていますね。
f:id:wrongwrongwrongwrong163377:20181031222141p:plain

参考にさせていただいたページ

qiita.com
clouds.tokyo

【プログラミング】JetBrains製IDEでLanguage Injection(言語インジェクション)を使う

JetBrains製IDEで使える言語インジェクションとその使い方をまとめます。

言語インジェクションとは

コードを書く中で、HTMLやSQL、GLSLのシェーダーなど、別言語のコードを文字列として書く必要が出てくる場合があります。
しかし、エディタ上ではこれらのコードが文字列として扱われるため、以下のような問題が発生します。

  • インデントが手動になる
  • エディタの自動インデント機能が絡んで見にくい/書きにくい状況になる
  • 色分け表示ができない
  • 補完が効かない

こういった問題を解決する機能が言語インジェクションです。

使い方

公式ページのGifが見やすいです。文字列に対してAlt+EnterからInject language or referenceで言語インジェクション、更にAlt+EnterからEdit [言語名] flagmentで専用エディタを開いて編集ができます。
pleiades.io

SQLの付加機能

データベースに接続すれば、言語フラグメントからAlt+Enterでデータベースを叩くこともできます。専用ソフトに比べると使い勝手では劣りますが、エディタで完結でき、環境ごとに使い勝手が変わらないという意味では便利です。
pleiades.io

GLSLの場合

GLSLは初期状態では言語インジェクションがサポートされていないので、プラグインを入れる必要が有ります。
Settings→Plugins→Browse Repositoriesから探すと出てきます。
f:id:wrongwrongwrongwrong163377:20181030044016p:plain

感想

去年の内にこれを知りたかったです……。
JetBrains製エディタ最強ですね。汎用性、機能性を考えると、組織なら環境はこれに揃えるのがいいんじゃないかと本気で思っています。
というか知らない機能が多すぎるので、もっと勉強が必要ですね。

【レビュー】Z8 レビュー【骨伝導イヤホン】

2020/7/24追記

最近音質が非常に悪くなる形で壊れかかっています。

割と毎日室内で使う(= 汗などで濡れない)環境で1年半以上使いましたが、最初にはずれを引いた以外は値段の割に持ったかなという印象です。


 以下の商品を買ったのでレビューしていきます。

 骨伝導イヤホン

自分はイヤホンやヘッドホンを付けるのがものすごく苦手です。付けていると耳の穴が痛くなるわ耳鳴りがしてくるわ、果ては金縛りになったりするレベルで苦痛です。そもそも結構周りの音を聞きながら生活しているので、耳を塞ぐということが感覚的に受け付けません。

一方、自分はずっと音楽を聞きながら作業するタイプで、特にプログラムを組むときは音楽を聞いていたいと思っています。しかし、職場で音楽を聞こうと思ってもスピーカーから垂れ流すわけにはいかず、かと言ってイヤホンやヘッドホンを付けたくはないという状況が有りました。

そこで購入したのが、耳を塞がない構造の骨伝導イヤホンであるZ8です。

なお選んだ理由は売れてそうだったからです。安直。

外から聞こえるような感じなのに周りには聞こえていないというような状況で、使い始めはとても不思議な感覚でした。

音質は同価格帯のイヤホンなどに比べると正直それほど良くありませんが、これは構造上致し方無いと思います。購入前思っていたよりは良かったです。

音漏れに関してはそれほど気にならないかなと思います。通常のイヤホン/ヘッドホンに比べると当然漏れやすいとは思いますが、漏れるほどの音量で鳴らすとうるさくて作業に集中できませんでした。

装着感

可もなく不可もなくという感じでした。

音の出る部分については柔らかい素材でできていて、音楽を聞いていても振動を感じたりズレてくるといった問題は無く、快適でした。

問題は眼鏡との物理的な干渉ですが、これはもうしょうがないので諦めました。

その他

その他不満点は2つ有ります。

まず左右一体型なので、持ち運びが意外と面倒くさい点です。カバンなどに入れて持ち運ぶには耐久性に難が有り、箱などを持ち運ぶのはダルさが有ります。

次は耐久性です。買ってから1ヶ月少しで壊れました……。問い合わせたところ交換対応してくれるとのことなので、次はハズレを引かなきゃいいなと思います。

総評

使用感に関しては満点です。音質や装着感については思っていたよりも良く、耳を痛めず、塞がず、周囲を気にせず音楽を聞けるのがとてもありがたかったです。

すぐ壊れたのだけが残念です。使えなくなってから結構不自由しています。交換先がちゃんと長持ちしてくれればいいんですが……。

蛇足

ここからは蛇足です。

最近のAmazonの商品(に限らず)、メーカー名が調べられないことが多くはありませんかね?この商品に関しては全く同じものが出品されてますが、両者ともにメーカー名に自ショップの名前を入れており、色々探してみても追いかけきることができませんでした。

タイトルもSEOやストア検索結果への最適化のみ考えたようなものが多く、正直見難いと感じます。まあ諸々問題が有るんだろうと思いますが、同一メーカーの製品を追っかけたり、あるいは避けたりし難いのは不満です。

【日記】エムグラム診断をやり直してみた

mgram.me

以前やったデータが出てきたので、もう一回やってみました。

前回

wrongwrongを構成する8性格 | エムグラム診断

Lncghzw1 jejqp3rxoc

今回

wrongwroを構成する8性格 | エムグラム診断(名前Typoは気にしない!)

f:id:wrongwrongwrongwrong163377:20181022020857p:plain

分析

前回の診断をやった1年前と比べると、最近自分の主張を割と強く表に出しているなと思っていました。診断結果はその通りかなーと思います。

ところで、性格診断と相性の確率が0.25%→0.12%と、ただでさえ低かったものが半減してました。単純計算で100人の女性と知り合っても出会える確率10%しか無いんですが……。

続き

ついでにくっついてた解説をコピペしておきます。

wrongwroを標準的な日本人🇯🇵と比べたら…⚖
1️⃣ 強靭性が超特異的に低い
2️⃣ 直観性が超特異的に高い
3️⃣ 新奇性が超特異的に高い
4️⃣ スルー力が特異的に高い 

1️⃣ 強靭性が高いとストレスなどの周りからの影響に鈍感です。低いと敏感に反応します。wrongwroは後者の傾向がかなり強く出ています。

2️⃣ 直観性が高いと概念的な本質を感覚的に捉えます。低いと感覚ではなく落ち着いて物事をとらえます。wrongwroは前者の傾向がかなり強く出ています。

3️⃣ 新奇性が高いと新しいものを好み未知のモノに反応します。低いと現状に対してより重点を置きます。wrongwroは前者の傾向がかなり強く出ています。

4️⃣ スルー力が高いと対人関係における負の感情を自然と受け流します。低いと受け流さず真に受けます。wrongwroは前者の傾向が強めに出ています。

wrongwroの性格と才能
才能というものは、それを持っていない人からすればそれを努力でカバーするのがすごく難しいのに、それをいとも簡単に成し遂げられる能力のことです。エムグラム診断ではあなたの性格が最もプラスに働いた時に発揮しうる才能を分析します。

f:id:wrongwrongwrongwrong163377:20181022022251p:plain

💎1️⃣ 気遣い上手なガラスのハート
あなたは、周囲の人をよく観察し、微妙な感情の変化に気づき、気遣いのある行動をします。これは、あなたが多くの人と円満な人間関係を築くことを助けます。無神経な発言などもしないため「一緒にいて心地が良い人」と思わることが多いのです。この才能がさらに活かされると、芸術・創作面での活躍も期待できます。

一方で、あなたは対人関係におけるストレスに敏感でストレスを抱えやすい傾向があります。それだけでなく、他人にも感情移入しすぎることで、他人のストレスまでもを自分が共有してしまうことさえあります。一人の時間もきちんと確保し、自分なりのストレス対処方法を日頃から実践することを大切にしましょう。

【読書感想】ノンデザイナーでもわかる UX+理論で作るWebデザイン

 読んだので、重要だと感じたポイントを幾つかまとめます。

ノンデザイナーでもわかる UX+理論で作るWebデザイン

ノンデザイナーでもわかる UX+理論で作るWebデザイン

 

全体を通して

サービス等の作成・運用を本格的には経験したことの無いエンジニアでも簡単に読み解くことができました。

ただUIを作るという技術的な観点だけではなく、「何故それを作るのか」「作ったものをどのように運用・改善していくのか」といった部分について丁寧に書かれていた点が良かったです。

ものづくりというのは、自ら得た情報や外部の情報を統合・分析し、どのような対策が有効かを可視化した上で行われるプロセスで、当然ものづくり以前のプロセスに破綻が有れば作ったものは無駄になってしまいます。このことについてはボンヤリと意識していましたが、この本を読んでその意識がより明確になりました。

Webサイトの目標

Webサイトに限った話では有りませんが、どのような規模の組織でも「まず達成すべき目標を理念にそって立て、次にそれを達成するために重要となる指標を可視化する」という手順を必ず踏んだほうが良いと感じました。

まずどこを目指すかを決め、その上で具体的な数値をどう変化させるのか、という目標を立てていく形を取らなければ、何のためにそれを作り、運用していくのかという軸がブレるだけでなく、作った後の検証も、検証結果からものづくりへの反映もできなくなるからです。

特にWebサービスを作るというのは自由度の高い作業で、それはやろうと思えば幾らでも何でもできてしまうという危険性が有ります。だからこそ、検証とそれができる環境づくりが大切なのだと思います。

ユーザーに気付いてもらう/動いてもらうための工夫

Webサービスは特に動的なものであるため、ユーザーに気付いてもらったり動いてもらったりするための工夫が必要だと感じました。

全体的には、ユーザーというか、人間がどんな動きをするか、どんなことができない/できるかを突き詰めて考えることでUIが洗練されていくなと感じました。

気付いて貰うためのページ/画面デザイン

ページ/画面全体のデザインとして、Webサイトなどを閲覧する時、文字を左上から右へ、次に下に下がって……と読むことから、人の目の動きはF字型になるため、これに配慮したデザイン(左上に最も注目して欲しい内容を表示するなど)を取り入れたデザインをするべき、ということを学びました。

これは例えば右から文字を書く文化では変動するのかもしれませんが、見て欲しい場所を見てもらうための工夫は重要だと思います。

UIパーツの動き

以下の2点が重要だと感じました。

  • 操作範囲が適切に広い、当たり判定が見やすいなど、操作がやりやすいこと
  • 操作前、操作可能、操作した、など、それぞれの状態に合わせてに特定の動きを付けることで、何を操作したことが伝わりやすいこと

ただ、この辺りは既製品として既に用意されている場合が増えてきたので、使い方の方が重要なのかなとも思います。

レイアウトパターン・アンチパターンを知る

これはざっくりですが、表現したいもの・扱うものなどの場面に合わせ、これが使いやすい/使いにくいというパターンが結構明確になっているようです。自分はまだ本格的にUIを作るような仕事には携わっていないので使わないので覚えられていませんが、ものづくりの中で覚えていこうと思います。