著者アーカイブ 村上

村上 著者:村上

【React】JavaScriptでポップアップを実装する方法

今後、再び使う機会がありそうなので、備忘録としてまとめ。
今回は、JavaScript でポップアップを表示させる方法についてです。
なお、使用しているフレームワークは React です。

参考に…というかコードをコピペさせていただいたサイトはこちら。

Simple react popup example
https://codepen.io/bastianalbers/pen/PWBYvz

なお、こちらは、下記の記事からリンクされていたサイトです。

JavaScriptを使ったポップアップウィンドウの表示方法|CodeCampus
https://blog.codecamp.jp/programming-javascript-pop-up

上記の記事では、CSS や jQuery、React だけでなく、AngularJS や WordPress のプラグインについてのリンクもあり、かなり種類豊富です。
また、Reactについてはコピー&ペーストで使えるので、かなり助かりました…!

 

実装のためのコードは下記のとおりです。
■HTML


<div id="content"></div>

■CSS

h1 {
  margin: 0;
  padding: 0;
}
html, body, .app {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100vh;
}
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0,0,0, 0.5);
}
.popup_inner {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  margin: auto;
  background: white;
}

■JavaScript

class Popup extends React.Component {
  render() {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <h1>{this.props.text}</h1>
          <button onClick={this.props.closePopup}>close me</button>
        </div>
      </div>
    );
  }
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showPopup: false
    };
  }
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }
  render() {
    return (
      <div className='app'>
        <button onClick={this.togglePopup.bind(this)}>show popup</button>
        {this.state.showPopup ? 
          <Popup text='Close Me' closePopup={this.togglePopup.bind(this)} />
          : null
        }
      </div>
    );
  }
};

ReactDOM.render(
  <App />,
  document.getElementById('content')
);

必要なさそうなところは割愛させていただきました。
上記のコードを追加して実行すると、画面に「show popup」というボタンが表示されるはずです。
で、そのボタンをクリックすると、ポップアップが表示されます。
ポップアップを閉じるときは、「close me」ボタンをクリックします。

簡単に解説すると、ポップアップの表示・非表示は、showPopup という state で制御しており、この値が true だとポップアップを表示し、false だとポップアップが非表示になります。
で、「show popup」がクリックされると、showPopup が true に、「close me」クリックで showPopup が false になります。
ちなみに、「close me」ボタンが押されたときの処理は、App クラス内の togglePopup 関数で定義していますので、処理の内容を変更したい場合はこちらを確認してください。

 

以上、Reactでポップアップを実装する方法でした。

村上 著者:村上

【Cordova】アプリで簡単にトーストを表示できる「Toast-PhoneGap-Plugin」

今日は、Cordovaアプリでトーストを表示するプラグインについてご紹介。
使用したのは「Toast-PhoneGap-Plugin」というプラグインで、コードも単純で分かりやすかったです。
GitHubのページは下記からご確認頂けます。
EddyVerbruggen/Toast-PhoneGap-Plugin: A Toast popup plugin for your fancy Cordova app
https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin

 

プラグインのインストールは下記のコマンドで行います。

cordova plugin add cordova-plugin-x-toast

トーストを表示するためのコードは下記のとおりです。

window.plugins.toast.showWithOptions(
    {
        message: "[メッセージ内容]",
        duration: "short",  // 表示する時間
        position: "bottom",  // 表示位置
    }
);

表示位置は、’top’, ‘center’, ‘bottom’ のいずれかを選択します。
表示時間は、’short’, ‘long’ もしくは ミリ秒単位で数値を指定することもできます。

また、表示に成功・失敗した時の処理を追加することもでき、その場合は下記のように記述します。

window.plugins.toast.showWithOptions(
    {
        message: "[メッセージ内容]",
        duration: "short",  // 表示する時間
        position: "bottom",  // 表示位置
    },
    //Success callback
    function(args) {
        // 成功した時の処理
        console.log(args.event);
    }, 
    function(error) {
        // 表示に失敗した時の処理
        console.error('toast error: ', error);
    }
);

また、トーストエリアの背景色を変更したり、文字色を変更したり、更には背景の透明度や四隅の丸みを指定することもできるようです。
指定の方法例は下記のとおりです。

window.plugins.toast.showWithOptions({
    message: "[メッセージ内容]",
    duration: "short",  // 表示する時間
    position: "bottom",  // 表示位置
    styling: {
        opacity: 0.75, // エリアの透明度
        backgroundColor: '#FF0000', // 背景色
        textColor: '#FFFF00', // 文字色
        textSize: 20.5, // 文字サイズ
        cornerRadius: 16, // 四隅の丸み
    }
});

こう見ると、かなり自由度が高いですね。
アプリの配色に合わせてカスタマイズしてもいいかもしれません。

最後に、トーストは時間経過で自動的に消えますが、もし手動で消したい場合はこちらを実行します。

window.plugins.toast.hide();

こちらはあまり使用する機会はないかも?

 

以上、Cordovaアプリでトーストを表示する方法でした。
分かりやすいし、カスタマイズもかなり自由に行えるのでお勧めです。
是非、ご活用ください。

村上 著者:村上

【Webサービス】簡単にQRコードを生成できるサイト「QRのススメ」

現在、業務で開発中のアプリに QRコードリーダーを組み込んでいるのですが、その際にテストとして読み込む適当なQRコードを生成するときにお世話になったサイトがこちら。

QRコード作成【無料】:QRのススメ
https://qr.quel.jp/

簡単に自分用のQRコードを無料で安心作成できるサイトです。主要な携帯電話からスマートフォン(Android、iPhone)まで、どのキャリアにも対応していますので集客やプライベートに幅広くご活用ください。気になるアクセス集計も可能です。

サイトのURLを指定し、簡単にアクセスできるQRコードや、自由なテキストを指定できるQRコードなど、様々な種類のQRコードが生成できます。
また、コードの中央にイラストや文字が入ったQRコードを生成することもできます。

 

使い方はとっても簡単で、まずページ中央のやや下にある「さっそく作る」ボタンをクリック。

あとは、作りたいQRコードのタイプを、

  1. サイトURL
  2. 自由テキスト
  3. アドレス帳

上記から選び、QRコードに含めたい情報を指定するだけ。
またこの時、コードの色やサイズも指定できます。
設定が完了したら、下部にある「作成する」をクリックし、作業は完了です。
あとは、別ウィンドウで生成されたQRコードが表示されるので、保存してご利用ください。

 

以上、手軽にQRコードが生成できるWebサービス「QRコードのススメ」のご紹介でした。
本当に簡単だし、何よりもわかりやすくておすすめです。

村上 著者:村上

【Android】端末の戻るボタンが押されたときに処理を実行する

Android アプリを開発中、端末の戻るボタンが押下されたかどうかを検知したいことがあると思います。
例えば、EditText エリアに何かを入力中に、うっかりボタンを押してしまっても、前のページに戻る前に確認のアラートを出すような機能を追加するときや、そもそも戻るボタン自体を無効にしたい、などです。
私も極たまにしか使わないので、備忘録としてまとめます。

 

といっても実装はとっても簡単で、下記のように onBackPressed をオーバーライドするだけです。

@Override
public void onBackPressed(){
    // 行いたい処理
}

あとは、この関数内で、戻るボタンが押されたときに実行したい処理を書くだけです。

私の場合、下記のような実装を行いました。

@Override
public void onBackPressed(){
    // EditTextに入力された文字列を取得
    EditText editText = findViewById([ID名]);
    if (editText.getText().equal("")) {
        finish();
    } else {
        // ダイアログ表示
        new AlertDialog.Builder(this)
                .setTitle([タイトル])
                .setMessage([メッセージ])
                .setPositiveButton("OK", (dialog, which) -> {
                    // OKが押された場合、Activity を終了し、前のページへ
                    finish();
                })
                .setNegativeButton("キャンセル", null)
                .show();
    }
}

上のコードでは、戻るボタンが押されたときに、EditText に入力された文字列を取得しています。
この時、EditText に何か文字が入力されていた場合、まだ編集中とみなし、警告のダイアログが表示されるようにしています。
EditText が空だった場合や、ダイアログでOKが押された場合は、finish() を実行し、現在表示されているアクティビティを終了して、前のページに戻ります。

 

なお、戻るボタンを検知する方法としては下記の記述方法もあります。

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if(keyCode == KeyEvent.KEYCODE_BACK) {
        // 戻るボタンの処理
        
    }
}

この書き方を用いると、戻るボタン以外の検知にも使えます。
複数のボタンの検知の処理を書きたい場合には、こちらのほうが便利ですね。
ですが、今回は戻るボタンの検知のみが行えればOKだったので、私は前者を使いました。
なんといっても、関数名が分かりやすいですし。
このあたりは、好みと実装内容によって使い分けてください。

 

以上、Androidアプリで戻るボタンが押されたことを検知する方法でした。

村上 著者:村上

【アプリ】眠れない夜にはメトロノームがいい?「Metronome Beats」

不眠症ではないはずですが、たまに眠れない夜とかがあったりします。
今までは、「寝たまんまヨガ」とか「Relax Melodies」を使っていたのですが、先日下記の記事を見つけたので、早速実践してみました。

寝つきが悪かった方が一瞬で眠れるようになった方法を描いた漫画に「効果ありそう」「逆に無理そう」「この方法も」など様々な声 – Togetter
https://togetter.com/li/1288882

なんでも、15~30分間くらいの時間、メトロノームを掛けて寝るだけというもの。
リズムは 20~30 くらいの聴いていて遅いと感じるくらいで、かつ音量もかなり小さめに設定するといいそうです。

 

私が使っているアプリは「Metronome Beats」です。
Google Play で探していて、なんとなく画面が格好良くて使いやすそうだったのでこちらをチョイスしてみました。
勿論、他に愛用しているアプリがあるなら、そちらをご利用ください。

インストールはこちらから。
ちなみに、Androidです。

メトロノームのビート – Google Play のアプリ
https://play.google.com/store/apps/details?id=com.andymstone.metronome&hl=ja

そして、実際のアプリ画面はこんな感じ。

主に使うテンポとかタイマー機能の設定が分かりやすいです。
画面を見れば分かると思いますが、私はテンポを 19 で設定しています。
私の場合、このリズムが深呼吸のタイミングにぴったりなんです。
また、タイマーは 30分に設定しています。
勿論、これは私の好みの値なので、適宜気持ちいいと思えるようにカスタマイズしてください。

実際にここ2~3日使ってみたところ、確かに寝つきが良い気がする…!?
実は一人暮らしを始めてから、実家に帰ると時計の秒針がうるさくて眠れない事があったのですが、これは音量が調整できるのと、テンポがゆっくりなためか、全く気になりません。
まあ思い込みしやすいタイプなので、プラシーボ効果とかもありそうですが…それで寝られるなら良いと思います。
しばらく継続して使ってみようと思います。

 

以上、おすすめのメトロノームアプリと、個人的なおすすめ設定値のご紹介でした。
寝つきが悪いと感じている方は、ぜひお試しください。

村上 著者:村上

【未解決】npm run build実行時に発生した「Failed to minify the code from this file」エラー

今日は現在開発中のアプリで発生したエラーについてです。
なお、タイトルにも書いてある通り未解決です。解決策が分かり次第、またまとめようかと思います。

エラーは「Failed to minify the code from this file」というものです。
表示された情報によると、発生個所は ./node_modules/rss-parser/lib/parser.js:16らしいです。
こちらは、RSS から情報を取得した情報を JavaScriptオブジェクトに変換するために、npm を使って追加したライブラリです。

Google翻訳に掛けたところ、「このファイルからコードを縮小できませんでした」とのこと。
ますます意味が分からない…。

 

調べてみたところ、create-react-app のバージョンが v3.0.0 以降だと、このエラーが表示されるようです。投稿者によると、v2.12.1 では問題なく動作したとのこと。
…が、残念ながら create-react-app は使っていないんですよね…。
React のバージョンも下げればいいのでしょうか?…でも、どのくらいまで下げれば?
残念ながら、まだ該当するような投稿を発見できず…。
まだ調査中です。

が、どうやらこのエラーが発生していても、実行自体はできるようでした。
npm run build 実行後、エラーは発生していましたが、試しにそのまま npm start を実行したところ、エラーは出つつも問題なく動作しました。
…なので、現在は暫定的にその状態で開発を進めています。

ですが、エラーが出るのは気になるので、時間を見つけて、引き続き解決策を探したいと思います!

村上 著者:村上

【備忘録】Firebase Cloud Messagingでのプッシュ通知の送信について

実は似たような記事を以前にも投稿しましたが、今回はメッセージを送付する際のHTTP構文についてです。
というのも、送信メッセージやタイトルを変えるだけならまだしも、パラメータを変更したり、追加・削除するときに毎回調べていたので、いい加減自分のためにまとめようと思ったからです。

そのため、この記事は私的重要ポイントのみをまとめてあります。
ご了承ください。

ちなみに、以前の記事はこちら。

【PHP】FireBase Cloud Messagingを利用したプッシュ通知をPHPから送る方法 – 株式会社シーポイントラボ|浜松のシステム開発会社
https://cpoint-lab.co.jp/article/201810/【php】fireBase-cloud-messagingを利用したプッシュ通知をphpから送る/

 

さて、まず Firebase の公式サイトのHTTP プロトコルについてのページがこちら。

Firebase Cloud Messaging の HTTP プロトコル|Firebase
https://firebase.google.com/docs/cloud-messaging/http-server-ref?authuser=0

このページですら毎回検索して探すので、こうしてまとめたかったというのが主ですね。

次に、各項目について。
送信先を指定するパラメータ to について、その具体的な指定値です。

指定値 対象
/topics/all 全端末に送信
/topics/android Android端末にのみ送信
/topics/ios iOS端末にのみ送信
/topics/[トピック名] 特定のトピックに登録されている端末にのみ送信
[デバイストークン] 特定の端末

こちらに関しては、特に説明不要かと思います。
送信先を指定したい場合、こちらの to の値を変更しますが、例が載っていなかったので、よく使いそうなもののみを抜粋しました。

次は dry_run というパラメータです。
こちらは未指定の場合のデフォルトは false になっています。
このパラメータを true にすると、実際にプッシュ通知を送らずに、レスポンス結果を取得することができます。
送信のテスト時に使うパラメータですね。

あとは、badge という、ホーム画面のアイコンにバッヂを追加するためのパラメータです。
こちらにバッヂの値を指定すると、プッシュ通知を受信した時にバッヂが追加されます。
なお、0 を指定すると、バッヂは削除されます。

よく使うのはこのあたりでしょうか。
他にも、Androidのみの設定で icon というパラメータでプッシュ用のアイコン画像を指定できます。
これがないと、アイコンが白い四角形になってしまい非常に味気ないので、Android アプリに通知を送る際は指定したほうが良さそうです。

 

以上、FCM でメッセージを送付する際のHTTP構文についてでした。
なお、レスポンスデータについては、上で挙げた Firebase の公式サイトのHTTP プロトコルについてのページの下の方に載っているので、こちらも参考にしてください。

村上 著者:村上

【アプリ】テキストエディタ「Sublime Text」の改行コードの確認と変更方法

仕事では、「Sublime Text」というテキストエディタを愛用しているのですが、改行コードの確認方法と、デフォルトの CR+LF から LF に変更する方法が分からなかったので備忘録としてまとめます。

今回参考にさせていただいた記事はこちら。

【Sublime Text】 デフォルトで使用する改行コードを指定する – Qiita
https://qiita.com/rico/items/15f423a4ea261766b774

 

まず、変更方法ですが、メニューバーの Preferences(基本設定)から Settings – Default(基本設定 – 標準)を開きます。
そうすると、この中に default_line_ending という記述があるはずなので、こちらを探します。
見つかったら、ここの値を system から unix に変更するだけ!
あとはファイルを保存したら、以上で改行コードの変更は完了です。
なお私の環境では、こちらの記述は Settings – Default に記載してあったのですが、参考記事では Settings – User に書かれているようです。
このあたりは、お使いの環境によって適宜変更してください。

次に、改行コードの確認方法ですが、上の方法で基本設定を確認する方法以外に、アプリ下部のステータスバーに常に改行コードを表示させる方法があります。
もしくは、メニューバーの表示 > 改行コードでも確認もできます。
こちらが一番お手軽ですね。
さて、ステータスバーへの表示方法は、Preferences > Settings – User を開き、このファイル内に "show_line_endings": true を追加(もしくは変更)するだけです。
こちらを保存すると、ステータスバーに変更が反映され、改行コードが常に表示されるようになります。
表示形式は windows(CRLF) / unix(LF) / Mac OS 9(CR)のように、OS の名前で表示されます。
LF の場合は、unix と表示されます。

 

以上、Sublime Text で改行コードの確認及び変更方法でした。
こういう設定系って、私の場合はかなりの高確率で忘却するので、むしろ私のための覚え書きの記事でした。
もし、同じことを知りたい人のご参考になれば幸いです。

村上 著者:村上

【Android】カスタムデザインのListViewを表示する

Android の ListView は、昔作成したことがあるのですが、いかんせん昔過ぎてほとんど忘れていたので備忘録もかねてまとめ。
ちなみに、すでに用意されているレイアウトを使うのではなく、リストアイテムのレイアウトからカスタムする方法です。

今回参考にさせていただいたサイトはこちら。

Androidでリストビュー(ListView)をカスタムして表示する – Qiita
https://qiita.com/ksugawara61/items/2d63f0be279a94b74550

 

早速実装!
まず、作成するファイルの一覧は下記のとおりです。
・MainActivity.java
・activity_main.xml
・list_item.xml
・ListItem.java
・ListAdapter.java

MainActivity.java に追加するコードは下記のとおり。

ListItem item = new ListItem();
// item にデータ追加処理を行う

ListView listView = findViewById([ListViewのID]);
ListAdapter adapter = new ListAdapter(this, R.layout.list_item, item);
listView.setAdapter(adapter);
listView.setOnItemClickListener((adapterView, view, position, l) -> {
    // ListViewのアイテムクリック時の処理
});

activity_main.xml ファイルには、ListView を追加します。

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/[ListViewのID]" />

ListItem.java には、ListView で使う値を扱えるクラスを定義します。

public class ListItem {
    private String entry_title;
    private String adate;
    private String url;

    public EntryListItem() {};

    public EntryListItem(String e_entry_title, String e_adate, String e_url) {
        entry_title = e_entry_title;
        adate = e_adate;
        url = e_url;
    }

    public void setEntryTitle(String title) {
        entry_title = title;
    }

    public void setAdate(String e_adate) {
        adate = e_adate;
    }

    public void setUrl(String e_url) {
        url = e_url;
    }

    public String getEntryTitle() {
        return entry_title;
    }

    public String getAdate() {
        return adate;
    }

    public String getUrl() {
        return url;
    }
}

ブログ記事を扱うことを想定しているので、それらの値が格納されるようになっています。
値の格納と取得を行うための関数も定義しています。

ListAdapter.java は、ArrayAdapter を継承していて、上の ListItem.java クラスを利用するためのクラスです。

public class ListAdapter extends ArrayAdapter<ListItem> {

    private int mResource;
    private List<ListItem> mItems;
    private LayoutInflater mInflater;

    public EntryListAdapter(Context context, int resource, List<ListItem> items) {
        super(context, resource, items);

        mResource = resource;
        mItems = items;
        mInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;

        if (convertView != null) {
            view = convertView;
        }
        else {
            view = mInflater.inflate(mResource, null);
        }

        // リストビューに表示する要素を取得
        ListItem item = mItems.get(position);

        // タイトル、投稿日時を設定
        TextView title = view.findViewById(R.id.title);
        title.setText(item.getEntryTitle());
        TextView adate = view.findViewById(R.id.adate);
        adate.setText(item.getAdate());

        return view;
    }
}

ListView にセットする Adapter がこのクラスです。

 

以上のコードとファイルを作成すると、カスタマイズされた ListView を実装することができます。
覚え書きのため、かなり簡単なまとめになっているので、もっと詳しく知りたい方は、最初に紹介した参考サイトを読んでください。

村上 著者:村上

【サービス】クレジットカードと連携できる家計簿アプリ「Zaim」

昨日スクリーンショットが撮影できなくて急遽記事の内容を変更しましたが、実は本当に紹介したかったのが、タイトルにある家計簿アプリ「Zaim」です。
日本最大級のレシート家計簿アプリ・オンライン家計簿らしく、今まで家計簿を付けることに挫折してきた人でも続けられるとの触れ込みでした。
私も今まで家計簿なんか付けたことがありませんでしたが、今のところ続けられています。

サービストップはこちらから。

日本最大級!無料の家計簿アプリ・レシート家計簿「Zaim」
https://zaim.net/

アプリとWebの両方あるのが嬉しいところ!
今どきの人は、すべてスマホでサクッと済ませるようですが、私はやっぱりパソコンでの操作が好きなんですよね。

 

使い方も簡単で、金額とカテゴリーを選択し、場合によってはメモも追加することができます。
また、入力する代わりにレシートを撮影することで、いくら使ったのかを記録することも可能です。
が、使い慣れていないせいで、上手くレシートを読み込めませんでした…。
まあ、文字入力は苦じゃないので、別に気にならないんですけどね。

また、履歴も一覧やカレンダーごとに表示を切り替えることができ、見やすいです。
私は主に週末にまとめて買い物をするので、土日の出費が多いですね。
今までは、なんとなく使った金額を把握していましたが、こうして実際の数値を見れると、一度に使う金額とか、買い物の傾向とか、浪費しているかどうかがはっきりとわかって良いです。
…自分ではそこまで浪費家ではないとは思っているのですが、ほんのたまに衝動買いをするので…そういうのもきっちりと記録できます。

更に、クレジットカードの登録もでき、カードでの支払履歴を確認することができます。
カード支払いはあまり行いませんが、だからこそ、たまに使ったときの履歴をこうして自動で保存してもらえるのは有難いですね。
ものによっては、何回かワンタイムパスワードの入力が必要で、ちょっと面倒でした。
私のもっているカードでは、イオンのクレジットカードの登録は少し手間でしたね。
その点、エポスカードの登録は簡単でした。

 

以上、ズボラさんでも続けられそうな、おすすめの家計簿サービス「Zaim」のご紹介でした。
家計簿アプリを初めて使う人は、是非こちらの使用を検討してみてはいかがでしょうか。