2018/10/01

標高(Elevation)

台風で防災アプリから初めて、川の氾濫危険水位のアラートが鳴って、標高(Elevation)が気になった。 いろんな場所の標高が知りたかったので、ちょっと、
「Maps JavaScript API」の「Elevation Service」を使ってみたよ。
⇒ 右側のガジェット部分の「標高(Elevation)」でポイントをクリックすると、その場所の標高が出ます。
全画面でやってみるとやりやすいかも。

ちなみに実家は、2.8メートルしかなかった。家の前が川だし。。

別タブで表示

2015/08/14

Windows8 / Windows10 アプリの画面がもやっと、ぼやける件

たとえば、chromeとか、Fiddlerとか、Evernoteとかがぼやけていました。

Windows8 / Windows10 には、ディスプレイのDPIに合わせて、アプリケーションの画面をスケーリングする仕組みがあって、
アプリケーション自身が、高DPIディスプレイのエクスペリエンスを最適化するために、
使用されているディスプレイの DPI を検出し、グラフィック要素、テキスト、画面レイアウトをそれに合わせて拡大縮小する必要があるので、そのように実装せよということらしい。
それをやってないアプリは、もやっとぼやけるかもねということらしい。

で、ぼやけるアプリは、その仕組みに従って作られていないので、
その機能を無効にしたら、はっきりする。

参考
一部のデスクトップ アプリケーションが高 DPI ディスプレイでぼやけて表示される

やり方
アプリケーションのショートカットやexeの右クリックプロパティから[互換性]タブ選択で、
[高DPI設定では画面のスケーリングを無効にする]のチェックと付ける。

アプリケーション再起動。

設定前(もやっとしてる)


設定後(はっきりしてる)

すっきりした。

2014/11/23

Windows8でAndroid5.0(lolipop)実機デバッグ

とってもハマったのでメモ

[androidsdkフォルダ]/extras/google/usb_driver 配下の
android_winusb.infを編集する

[Google.NTx86]のまとまりと[Google.NTamd64]のまとまりの一番下に

;Google Nexus 5
%SingleBootLoaderInterface% = USB_Install, USB\VID_18D1&PID_4EE2
%CompositeAdbInterface%     = USB_Install, USB\VID_18D1&PID_4EE2&REV_0232&MI_01

を追記して、デバイスマネージャからドライバの更新すればいい

だけなんだけど、なかなかできなかった。

「指定されたカタログ ファイルにファイルのハッシュがありません。ファイルが壊れているか、改ざんされた可能性があります。」
とかになって、、

メッセージでググって参考にしたサイトは以下。

(参考)Windows 8でAndroidのADB用USBドライバーをインストールする方法

完全にシャットダウンしてブート後オプションメニューを表示するときは
shutdown /r /o /t 0

(参考)Windows8の shutdown コマンドのパラメーター


2014/10/13

正多角形の作図

m/n角形を作図するよ。
m:角の数
n:何回転してもとにもどるかの数

m/n角形

m/n角形は、その多角形の上を歩くとして、
n周で、m回角を曲がるような多角形という感じだと思っている。
#ちょっと強引だけど、1周(360度)するのにm/n回角を曲がるような多角形と思っている。

  • 3角形

例えば、
3角形は、3つ角があって、1周して元の点にもどる。
このとき、1つの角で向きを変える角度(外角)は
360÷3=120度

  • 5/2角形∽5/3角形

5/2角形は、5個角があって、2周して元の点にもどる。
このとき、1つの角で向きを変える角度(外角)は
360×2÷5=144度
ということで、ちゃんと144度ずつ曲がったら★になるのだ!

作図

5/2角形(5/3でもいいけど)を分度器ないけどきっちり描きたかった。
せっかく描いたし、やり方忘れるからメモっておこう。

1' 0 1 2 3 4 5

点0から点1は辺の長さ100とかで描くよね。
点2の座標が知りたいわけだけど、
点1'なる同じ長さだけ延長した点を外角分だけ回転したやつだから、

点2の座標 X[2],Y[2]は、点1を原点として考えると
X[2] = 100*cos(0-144)
Y[2] = 100*sin(0-144)
になるよ。0度から-144度に回転しているからね。極座標ね。
# 極座標(r,θ)は、x=r*cosθ,y=r*sinθだった

だから一個前の点1 の座標X[1],Y[1]で表すと、
X[2] = X[1] + 100*cos(0-144)
Y[2] = Y[1] + 100*sin(0-144)

で、次

2' 0 1 2 3 4 5

点3の座標 X[3],Y[3]は、点2を原点として、点2'をまた-144度回転してるから、
X[3] = X[2] + 100*cos(-144-144)
Y[3] = Y[2] + 100*sin(-144-144)
だね。

ということで帰納法で
deg[i]= deg[i-1]-144;
X[i]=X[i-1] + 100 * cos(deg[i-1]-144)
Y[i]=Y[i-1] - 100 * sin(deg[i-1]-144)
という感じです。
#ここでY座標は、マイナスにしているのは、
#SVGなる図を描くタグで左上が原点で、Y座標は↓がプラス方向なので。

SVGで描いたサンプルはここ

2014/10/05

業務システム向き WEB UI について気をつけること

あんまり、画面系やってないから調べないとわからんね。

業務向けについて

UI/UXの観点から見た業務系ツールを開発するときに気をつけたい20項目
これが参考になるのでは!

引用
  • データ削除のConfirm
  • ページング、検索結果件数、表示件数
  • 並び替え
  • 部分一致、前方一致の明記
  • カタカナ英語を使わない(NEXT→次のページ)
  • 用語の統一
  • ×検索 ○検索する
  • 操作できる部分でポインターの切り替え
  • 余白
  • クロスブラウザ対策
  • IMEモードの設定
  • メニューは全ページ共通のものをつける
  • 軽く
  • ログアウト
などに気をつけて、デザインしよう!
IMEモードの設定とかは、使っている立場だとけっこううざいんだけど、
やっぱりやった方がいいのだなぁ。

見た目について

目に優しいUIデザイン(1)
これが参考になった。

<目のつかれ>
1.眼球の動き
動きを少なくするために
→配置に一定のルールを設ける(左上から右下が暗黙のルール)
→関連するものは近くに配置するとか?

2.情報の認識率
ピント合わせを少なくするために
→例えば、ポップアップWindow以外の後ろの画面にマスクをかける(FLEXみたいに)とか
→注目してほしいところに注目してくれるようにするってこと?難しいなぁ
→似たようなものを並べて発見しやすくするとか?

3.光量
瞳孔のコントロールを少なくするために
→ローコントラスト(白黒が最悪)
→チラチラしないってことかな、色を統一すればいいのかな?
→標準反射率は人肌(反射率18%)でwなるほどと思いました。

らしい!勉強になります。


とりあえず、人肌色についてもうちょっと調べてみた。
反射率18の色を探そうと思っていろいろググってみたんだけど、
よくある、colorhexaとかのサイトには、反射率なる項目が無い( ;∀;)

で調べたら、
ここのサイトにLight Reflectance Value (LRV) なる一覧があったよ。

LRVの一覧がこれ↓
ColorEssentials LRV Spreadsheet

#これなんだけど、ちょっと、HTML colorとのマッピングができないので、
#スプレッドシートにまとめてみたよ→color-LRV

で、とりあえず18から24くらいだとこんな感じ

LRV Value = 18~24
NumberColor NameLRV ValuesHTML color
0039Mandalay Road19#A46952
0045Sizzling Hot21#A67160
0051Caramel Candy24#B57866
0052Spiced Carrot19#A86A57
0058Angelic Choir22#B86D64
0064Lord Baltimore22#B86E69
0065Poppy Prose20#AF6661
0073Corazon19#A06C69
0080Abra Cadabra18#9A696C
0087Cinnapink20#A76C76
0092Fresh Day24#B2777A
0093Herald of Spring20#A86B6D
0114Montrose Rose20#A07079
0120Summer's Eve23#AB766F
0129Arrowhead19#936F64
0135Emerging Leaf24#9C7F74
0150Temptation20#987464
0157Dodge Pole23#A6795C
0165Cavern Sand21#9A775C
0171Golden Glove23#A37C5B
0178Cupcake20#90765C
0185Noble Crown20#907962
0191Dusty Path22#917D69
0199Sandy Shoes20#887B69
0206Thatched Cottage21#877D6C
0213Coastal Fog20#84796C
0219Camel's Hump21#877C6D
0227Moonscape23#90836F
0234Industrial Strength22#8B7F6A
0241Prince Paris24#A17F5D
0242Rare Happening18#92714F
0256Crazy Horse24#A87E52
0263Country Charm19#92734F
0269Sahara Wind18#90714A
0277Golden Freesia19#8C7554
0291Rutherford20#917956
0298Brocade20#90784F
0312September Gold21#927C50
0319Herald's Trumpet20#8E7A52
0325Welcome Home23#94825A
0326Bambino18#83734E
0339Ceramic Pot24#93866D
0360Land Before Time24#908565
0367Chocolate Velvet20#857B5C
0381Sonata21#868065
0396Wing Man18#7E7646
0403Tropical Twist21#897F4D
0416Taffeta Sheen23#868766
0429Pendula Garden23#81876C
0437Bowling Green20#788068
0458Malarca22#778575
0465Earthen Cheer20#6F8076
0479Stairway to Heaven18#6F7874
0486Paradise City18#67797A
0492Polar Pond20#72807F
0506Ocean Storms23#778692
0513Backwater18#70767E
0520Slate Tint23#818590
0534Subtle Shadow24#858787
0542Captain Nemo24#878686
0549Emu18#7A7473
0555Ocean Frigate21#817C7D
0563Vigilant21#867F74
0569Fireplace Mantel22#878074
0576Stormy Weather19#7C786D
0583Billowing Smoke18#747770
0590Madonna Blue20#687C9C
0591Blue Jacket18#627697
0598Caribbean Current20#617DAC
0605Capri Isle18#5974B4
0612Parkwater20#547CBC
0626Blue Depths18#65778D
0640Skylla20#397EC3
0647Zenith20#567FA3
0654Peninsula19#4A80A1
0668Wish Upon a Star19#4E828D
0675Blue Bliss24#0096AC
0689Atmosphere21#478887
0703Mountain Meadow24#6E8D80
0710On the Nile24#55937A
0725Melbourne19#578253
0760Green Knoll21#6D8654
0767Golf Day23#639149
0788Green Glow22#7E8547
0886Gold Estate23#9C814C
0893Rich and Rare22#9B7D4E
1005Flickering Flame21#AA734F
1012Hampton Beach18#A16947
1019Orange Ballad23#B77449
1039Pretty Parasol19#AE674B
1067Sweet Baby Rose19#BE594B
1068Best of the Bunch19#BE5E4C
1081Endless Possibilities22#DF4F47
1100Heart to Heart24#D56169
1101Mullen Pink18#C74B4A
1144Temptress21#BF6471
1165Pink Parade24#B571A6
1171Teen Queen24#A9799D
1193Crown Jewels22#9A73B0
1200Felicia22#957896
1206Screen Gem24#A07C9B
1221Charming Violet20#907683
1249Purple Spire19#7974A0
1256Plum Preserve21#8276AC
1263Medieval19#7273B3
1270Wind Star21#727AB8
1277Regal Azure21#737BB2
1291Dancing in the Spring20#82798D
1298Queen of Sheba22#877B9B
1305Victorian Violet18#82727D
1312Southern Belle19#837382
1319Overlook18#717481


結構暗いね。
あと、黄色系が無い!
黄色系は、反射率が70~80あるみたいで、目にやさしくないことがわかった。
オレンジに近い色でも60くらい。
んー黄色はよく使うけどなぁ。

Excel2007か2010からテーマの色に黄色が無いなーっと思ってたんだけど、
目にやさしくないからなのか!

まあ、こんな感じで、上にあげたようなモヤッとした色を採用すればいいのかなw


2014/07/14

Android携帯の着信音とアラーム音楽を変えよう

もはや、Androidの携帯で音楽を聞くときは、GooglePlayMusicを使うので
携帯に音楽をコピーしなくてもよくなったけど。
着信音とかめざましのアラーム音楽とかを変えたい!という方のために
簡単に説明しようと思います。

MP3を編集する?

まず、音楽をイケてる出だしにしたいよね。
mp3cutというサイトで、とても直感的に、編集できます。
http://mp3cut.net/
どうぞ。

パソコンの音楽を携帯に入れるというところからです。

まずパソコンと携帯をUSBでつなぎます

USB(´・ω・`)?
こんなやつです。


繋ぐと、ピコ!と音がする(かバイブかなにか)ので、
携帯を見ると、「メディアデバイスで接続」か何かのお知らせが出ています。


携帯側で接続を許可すると、パソコンは、携帯を認識します。
[フォルダを開いてファイルを表示]を選択します。
この画面が出てこない場合は、[マイコンピュータ]から携帯が接続されている
ドライブ(ディスク)を選択して表示します。

Android側にフォルダを作る

続いて、フォルダーを開いて音楽を入れる場所をつくります。
私は、『コンピューター\Nexus 5\内部ストレージ\media\audio\ringtones』に入れてます。


ここで、
着信音が『ringtones』で、
めざましが『alarms』です。

べつに、場所(階層)はどこでもいいのですが、フォルダ名が重要です。
フォルダは、右クリックメニュー『新規フォルダー』で作って名前をとにかくRingtonesとAlarms

PCからAndroidにコピペ

続いて、パソコンの音楽が入っている場所を開きます。
左がAndroidに作ったRingtonesフォルダで、右がパソコンの音楽が入っているフォルダです。
















携帯で着信音・めざましアラームを今コピーした音楽に変えよう

携帯を見ます。
まず、着信音から
[設定]>[音]>[着信音]ですかね?機種によって違うんですよね。



次にアラーム


ワーイできた!

ちなみに、携帯にすでに音楽いっぱい入ってるし(´・ω・`)っていうひとは、
いけてるファイルエクスプローラ(ESファイルエクスプローラとか?)あれば、
音を設定するときに、起動してくれるから、直接指定できるね(´・ω・`)




JavaFXでグラフ描くよ

CSSでグラフの色が設定できるのはいいですね。
あとから、簡単に変えれる!
StackedChartをやるつもりでしたがひとまず、1系列で。
#追記:ソースがうまく貼れないので、githubにあげてみた

まず、画面が

<BorderPane id="_root" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxsample2.ChartController">
    <stylesheets>   
        <URL value="@chart.css" />
    </stylesheets>
    <top>
            <MenuBar id="menuBer" layoutY="2.0">
                    <menus>
                            <Menu mnemonicParsing="false" text="メニュー" />
                    </menus>
            </MenuBar>
    </top>
    <center>
        <VBox>
        <StackedBarChart fx:id="chartApp" BorderPane.alignment="CENTER">
            <xAxis>
                    <CategoryAxis fx:id="xAxis1" side="BOTTOM" />
            </xAxis>
            <yAxis>
                    <NumberAxis fx:id="yAxis1" side="LEFT" />
            </yAxis>
    </StackedBarChart>
        <StackedBarChart fx:id="chartApp2" BorderPane.alignment="CENTER">
            <xAxis>
                    <CategoryAxis fx:id="xAxis2" side="BOTTOM" />
            </xAxis>
            <yAxis>
                    <NumberAxis fx:id="yAxis2" side="LEFT" />
            </yAxis>
    </StackedBarChart>
        </VBox>
    </center>
</BorderPane>

コントローラが
public class ChartController extends BaseController  implements Initializable{
    @FXML private NumberAxis yAxis1;
    @FXML private NumberAxis yAxis2;
    @FXML private CategoryAxis xAxis1;
    @FXML private CategoryAxis xAxis2;
    @FXML private StackedBarChart chartApp;
    @FXML private StackedBarChart chartApp2;
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        XYChart.Series series1 = new XYChart.Series();
        XYChart.Series series2 = new XYChart.Series();

        xAxis1.setLabel("Time");
        xAxis2.setLabel("Time");
        Calendar cal1 = Calendar.getInstance();
        SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss");//"hh:mm:ss SSS"
        cal1.set(2016, 6, 30);
        Random rnd = new Random();
        ArrayList datelist = new ArrayList();
        for(int i=0; i< 20; i++){
         cal1.add(Calendar.SECOND, 1);
         String label = sdf.format(cal1.getTime());
         datelist.add(label);
        }
        xAxis1.setCategories(FXCollections.observableArrayList(datelist));
        xAxis2.setCategories(FXCollections.observableArrayList(datelist));
        
        yAxis1.setLabel("M bps");
        yAxis2.setLabel("なんか単位");
        series1.setName("なんとかチャート");
        series2.setName("なんかのグラフ");
        for(int i=0; i< 20; i++){
            float val = rnd.nextInt(100); 
            series1.getData().add(new XYChart.Data(datelist.get(i), val));
            series2.getData().add(new XYChart.Data(datelist.get(i), val%20));
        }
        chartApp.getData().addAll(series1);
        chartApp2.getData().addAll(series2);
    }
}



でCSSがこんな感じ
.chart {
    -fx-category-gap:0.0px;
    -fx-background-color: -fx-box-border, #f5f5f5;
    -fx-background-insets: 0, 1;
}
#chartApp .default-color0.chart-bar{
    -fx-stroke-width: 0;
    -fx-background-radius: 0;
    -fx-background-color: rgba(50,180,230,0.6);
    -fx-background-position: left center;
}
#chartApp2 .default-color0.chart-bar{
    -fx-stroke-width: 0;
    -fx-background-radius: 0;
    -fx-background-color: rgba(180,230,50,0.6);
    -fx-background-position: left center;
}