onsen code monkey

個人的な日記とプログラミング備忘録です

【Java】メッセージダイアログを表示する

一番シンプルなやつ

JOptionPane.showMessageDialog(null, "メッセージだよ");

第一引数・・・ダイアログのFrame。nullの場合はデフォルトのFrameが使用される
第二引数・・・表示するメッセージ


いろいろ弄りたい場合は以下参考

import javax.swing.*;
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.event.*;

public class JOptionPaneTest2 extends JFrame implements ActionListener{

  public static void main(String[] args){
    JOptionPaneTest2 frame = new JOptionPaneTest2();

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setBounds(10, 10, 300, 200);
    frame.setTitle("タイトル");
    frame.setVisible(true);
  }

  JOptionPaneTest2(){
    JButton button = new JButton("dialog");
    button.addActionListener(this);

    JPanel p = new JPanel();
    p.add(button);

    getContentPane().add(p, BorderLayout.CENTER);
  }

  public void actionPerformed(ActionEvent e){
    JLabel label = new JLabel("Message");
    label.setForeground(Color.RED);
    JOptionPane.showMessageDialog(this, label);
  }
}

参考サイト様
警告ダイアログを表示する - JOptionPaneクラス - Swing

【HTML】IEでHTML5の機能が使えなかった件

HTMLファイルをIEで開くとレイアウトが崩れていたりonInputやpattern等のイベントが発火しなかったりで謎だった。

丸一日ハマってしまったが、IEのドキュメントモードがIE7HTML5非対応)に設定されてたことが原因だった。

対策は非常に簡単で以下のメタタグをHTMLに追加すればよいだけ。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

上記タグを追加することで最新のドキュメントモードを指定することができる。

注意したいのは、「閲覧者の環境でインストールされているIEの中の最新のバージョン」で表示するという点。

IE自体が古ければドキュメントモードを最新にしたところでHTML5の機能は使えないっぽい。
ちなみに"IE=edge"とあるけどMicrosoft Edgeとは関係ないらしい。

↓現在のドキュメントモードはF12で開発者ツールを開けば確認できる。
f:id:hitoto28:20180907140235p:plain

【JavaScript】即時関数ってなんだ

JavaScriptってJavaやC系言語の経験があればなんとかなると思ってごまかしごまかしやってきていたけれど、即時関数なるものに遭遇し無事死亡。
しばらくググってなんとなくは理解できたのでメモ。

即時関数

(function() {
// 処理
}());

↑こんなやつ

いろんな使い方はあるみたいだけど、同名の変数がある場合に競合しないようにスコープを制御する使い方が一般的らしい。

例えば

function hoge(){
  console.log("関数1を実行しました");
}
function hoge(){
  console.log("関数2を実行しました"); //こっちが実行される
}
hoge();

このように関数名が重複している場合は後の関数だけが実行される。

そこで即時関数を使用すれば同名関数があった場合も全て実行させることができる。

//即時関数1
(function() {
  function hoge() {
    console.log('関数1を実行しました');
  }
  hoge();
}());
//即時関数2
(function() {
  function hoge() {
    console.log('関数2を実行しました');
  }
  hoge();
}());

なら変数名変えればいいじゃんって話だけど、他の人が作ったJavaScriptファイルを同じHTMLで読み込んだ場合に変数名が被ることとかあるかもしれないしね。


引数を持たせる場合

(function (param1, param2) {
    // 処理
}('hoge', 'fuga'));

返り値を持たせる場合

var result = (function (param1, param2) {
    return param1 + param2;
}(1, 2));

即時関数に名前を付ける場合

(function hoge(count) {
console.log('hogeを実行しました ')
setTimeout(function () {
hoge(count);
}, 1000);
}())

参考サイト様
JavaScriptで即時関数を使う理由

JavaScriptの即時関数とは何か。意味やメリット、引数の使い方についてまとめてみた。 | ゴトーのブログ

【React】Reactを触ってみる(コンパイル&サーバ起動まで)

f:id:hitoto28:20180709030013p:plain


前回

hitoto28.hatenablog.com

create-react-appコマンドが使えるようになったので実際に簡単なアプリを作成する。

まずはターミナルで以下のコマンドを実行し、Reactのプロジェクトを生成する。
事前に適当なディレクトリに移動しておくこと。

$ create-react-app helloworld

※「helloworld」の部分はプロジェクト名。
React.jsアプリに必要なパッケージ等のインストールが開始される。
ファイル構成は以下の通り。

.
├── README.md
├── node_modules/
├── package-lock.json
├── package.json
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

そしてコンパイル&httpサーバー起動

$ npm start

成功すると以下のように表示されるので、ブラウザでURL(
http://localhost:3000/
)にアクセスする。
f:id:hitoto28:20180818231023p:plain

あとはApp.jsやApp.cssを好きなように編集すればよし。
めちゃくちゃ便利。

ビルドする際は以下のコマンド

$ npm run build

build/ 以下にproductionファイルが生成されるとのこと(未確認)
とりあえずもう少し色々触ってみる。
今回はここまで


参考サイト様
create-react-app で React フロントエンドの掲示板を作ってみる(リスト表示) - JavaScriptだけでWebサイト開発

【React】Reactを触ってみる(Mac環境構築まで)

f:id:hitoto28:20180709030013p:plain
いろんなやり方があるらしい。
create-react-appを使うのが一番楽とのこと。
とりあえずやってみる。

事前知識

create-react-appってなに?

Facebookが提供しているCLIツール
・Reactの開発環境を簡単に構築できる
・これがないとwebpackの設定とかめんどくさい

node.jsってなに?

・サーバーサイドのJavaScript
・非同期 (I/Oの処理結果を待たず処理を進める)
・イベントドリブン
・シングルスレッド
フレームワークにExpress、Backbone.js、Sails、Meteor等
・コールバック関数(非同期の処理が終わったら呼ばれる関数)
・npm (node package manager)

nodebrewってなに?

nodebrewとは、nodeのバージョンを管理・切替するツールのこと

homebrowってなに?

homebrowとは、macOS用のパッケージマネージャーのこと

インストール

まずはnode.jsがインストールされているか確認する。
ターミナルより以下のコマンドを実行

$ node -v

バージョン情報が表示される場合は既にインストールされているので最後のcreate-react-appのインストールへ進む。
node.jsがインストールされていない場合、以下のコマンドでhomebrowをインストールする。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

以下のコマンドでhomebrewのバージョン確認ができればインストール成功。

$ brew -v

続いて以下のコマンドでnodebrewをインストール。

$ brew install nodebrew

以下のコマンドでバージョン確認できればインストール成功。

$ nodebrew -v

いよいよnode.jsのインストール。
以下のコマンドで最新版をインストールする。

$ nodebrew install-binary latest

この際、エラーメッセージ「No such file or directory」が表示された場合は以下のコマンドでディレクトリを作成する。

$ mkdir -p ~/.nodebrew/src

インストールされたnode.jsのバージョン確認。

$ nodebrew list

以下のコマンドでnodeコマンドの実行パスを通す。
注:xxxxxはUserのHomeDir名

$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bash_profile

一度ターミナルを再起動し、以下のコマンドでnode.jsのバージョンを確認。
以下のコマンドで設定を反映させる。

$ source ~/.bash_profile

node.jsのバージョンを確認。

$ node -v

バージョン情報が表示される場合は正常。
「-bash: node: command not found」のようなメッセージが出る場合は失敗している。対処法は割愛。

以下コマンドでnpmコマンドが使えることを確認する。

$ npm -v 

バージョン情報が表示されればOK。

最後はcreate-react-appコマンドのインストール。
グローバルで使うので-gフラグを付ける。

$ npm install -g create-react-app

HelloWorldプログラムは次回の記事で書く予定。

以下、参考にしたサイト様
ありがとうございました。

Node.js を5分で大雑把に理解する
Macにnode.jsをインストールする手順。
【React入門(1)】開発環境をMacに構築してみる
node.js の環境管理ツール nodebrew - Block Rockin’ Codes

【Swift】UserDefaultsでデータを保存する

f:id:hitoto28:20180702031448p:plain
iOSでデータを永続的に保存する方法は数多あれど、最もお手軽かつ高速な方法と言えばUserDefaults。
大量のデータや機密データを扱う場合は大人しくDB等を使うべし。

UserDefaultsの特徴

  • key=valueでデータを保存することができる
  • 学習コストが低い
  • 少量のデータ保存に向いている
  • 機密性が高いデータの保存には向いていない
  • 保存したデータはアプリ内部にplist形式(XML)で保存される

UserDefaultsで保存できる型と使用するメソッド

対象の型 保存時の処理 参照時の処理
配列型
[Any]
set:forKey: array:forKey:
真偽型
Bool
set:forKey: bool:forKey:
データ型
Data
set:forKey: data:forKey:
辞書型
[String: Any]
set:forKey: dictionary:forKey:
浮動小数点数
Float
set:forKey: float:forKey:
整数型
Int
set:forKey: integer:forKey:
オブジェクト型
Any
set:forKey: object:forKey:
文字列型配列
[String]
set:forKey: stringArray:forKey:
文字列型
String
set:forKey: string:forKey:
倍精度浮動小数点数
Double
set:forKey: double:forKey:
URL型
URL
set:forKey: url:forKey:


サンプルコード① 文字列の読み書き

UserDefaultsへ文字列を保存する

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// sampleというキーで値「aiueo」を保存する
userDefaults.set("aiueo", forKey: "sample")

// UserDefaultsへの値の保存を明示的に行う
userDefaults.synchronize()

UserDefaultsから文字列を取り出す

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// sampleというキーを指定して保存していたString型の値を取り出す
if let value = userDefaults.string(forKey: "sample") {
    print(value)
}


サンプルコード② UserDefaultsのデータを削除
UserDefaultsから文字列を削除する

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// sampleというキーを指定して保存していた値を削除する
userDefaults.removeObject(forKey: "sample")
userDefaults.synchronize()

UserDefaultsのデータを一括削除する

// UserDefaultsの参照
let userDefaults = UserDefaults.standard

// 一括削除
if let domain = Bundle.main.bundleIdentifier {
            userDefaults.removePersistentDomain(forName: domain)
        }
userDefaults.synchronize()


サンプルコード③ 独自クラスの保存と呼び出し

独自クラスの宣言

// 独自クラスをシリアライズする際には、NSObjectを継承し
// NSCodingプロトコルに準拠する必要がある
class SampleData: NSObject,NSCoding {
    
    var data1: String?
    var data2: Bool = false
    
    override init() {
    }
    
    // デシリアライズ処理(デコード処理とも呼ばれる)
    required init?(coder aDecoder: NSCoder) {
        data1 = aDecoder.decodeObject(forKey: "data1") as? String
        data2 = aDecoder.decodeBool(forKey: "data2")
    }
    
    // シリアライズ処理(エンコード処理とも呼ばれる)
    func encode(with aCoder: NSCoder) {
        aCoder.encode(data1, forKey: "data1")
        aCoder.encode(data2, forKey: "data2")
    }
}

UserDefaultsへの保存と呼び出し処理

// 独自クラスのインスタンスに値を格納
let sampleData = SampleData()
sampleData.data1 = "hello"
sampleData.data2 = true

// UserDefaultsの参照
let userDefaults = UserDefaults.standard
        
// シリアライズ処理
let archiveData = NSKeyedArchiver.archivedData(withRootObject: sampleData)
userDefaults.set(archiveData, forKey: "sample")
userDefaults.synchronize()

// デシリアライズ処理
if let storedData = userDefaults.object(forKey: "sample") as? Data {
    if let unarchivedData = NSKeyedUnarchiver.unarchiveObject(with: storedData) as? SampleData {
	if let data1 = unarchivedData.data1 {
	    print(data1)
	}
	print(unarchivedData.data2)
    }
}

XcodeがiPhoneを認識しない件 - [iphone is not connected]

f:id:hitoto28:20180702031355j:plain

いつもXcodeで書いたコードをWi-Fi経由でiPhone実機に接続してコンパイルしていたのだけれど、ある日突然「iphone is not connected」が発生した。

ググってみると人によって様々なケースがあるようで、一つずつ試してみたものの自分の場合はどの解決方法にも該当しなかった。

最終的にiPhoneを再起動してiMacとUSB接続すれば解消できた。

ただしWi-Fi経由では実行できないまま。どうすればいいんだ。

 

環境    

iMac 27-inch 2017

macOS High Sierra 10.13.5

Xcode9.4.1

iPhone SE

iOS 11.4

 

解決したら。追記します。

 

解決したので追記(2019/04/10)

iOSXcodeを最新Verに更新(iOS→12.2、Xcode→10.2)

②PCとiPhoneを接続(有線)

Xcodeのwindow → Devices and Simulators

④自分のiPhoneが表示されるので Connect via network にチェックを入れる

上記手順の後はケーブルを抜いても実機テストができるようになった。

要はXcodeのVerが古かっただけでした。