月別アーカイブ 11月 2018

村上 著者:村上

【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でポップアップを実装する方法でした。

  • この記事いいね! (0)
asaba 著者:asaba

【html5】imgタグでQRコード生成

タイトルの通りです。何か月か前に、reactのパッケージ「qrcode.react 」を使ってQRコードを生成する記事を書きましたが、それが

QRcodeAPIを使ってhtmlのタグに組み込んで作れることが分かりました。処理の内容は単純で、api.qrserver.comのQRコードジェネレータ

を使ってQRコードの本体とURLをしてるだけなのでこちらで実装するコードもかなり短いものとなっております。

このように記述してビルドすると下記のQRコードが出来上がっていると思います。

QRコード

 

※urlは静岡西部のローカル、FMHaroになっています。

上記の図のようにまずはQRCodeAPIのURLを書き、続いてdataから組み込みたいサイトのURL(遷移先のURL)を記述するだけで

完成となります。また、後ろにsizeやbgColorを設定することでオリジナルのQRCodeを作ることもできる柔軟性も持ち合わせているので

総じて使いやすいライブラリといえるでしょう。

 

提供しているサイト(海外ぽい)のURLです。ここでライブラリの概要を見ることが出来ます。http://goqr.me/api/

 

  • この記事いいね! (0)
takahashi 著者:takahashi

MySQL Server 8.0からデフォルトの認証方式が変更。MySQLiやPDOではまだ扱えないため要注意。

最近MySQLの最新バージョンである8.0のちょっと大きめな仕様変更を知ったので、記事にしたいと思います。

MySQL8.0では、デフォルトの認証方式が従来の “mysql_native_password”から”caching_sha2_password”へと変更されています。

このcaching_sha2_passwordですが、実はまだ対応できてないクライアントやプラグインが多く、何も知らずにMySQL 8.0を使用してしまうと、プログラムなどから接続できなくなる事態が発生してしまいます。

特にPHPではMySQLへの接続に MySQLiやPDO_MySQLを主に使用しますが、いずれも”caching_sha2_password”には現時点で対応しておらず、MySQLへ接続しようとすると失敗します。

そのため、現時点でPHPからMySQL8.0系に接続するためには、MySQL側の設定を変更する必要があります。

変更すべき点は下記の2つです。
・MySQLユーザーごとの接続方式の指定を”mysql_native_password”に変更する。
・MySQLのコンフィグファイルで、デフォルトの認証方式を”mysql_native_password”に固定する。

詳細は下記の参考サイトをご確認ください。

phpからMySQL 8.0へPDOで接続時「SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client」 – Symfoware

  • この記事いいね! (0)
村上 著者:村上

【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アプリでトーストを表示する方法でした。
分かりやすいし、カスタマイズもかなり自由に行えるのでお勧めです。
是非、ご活用ください。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova-react】 tips of react

今日は自分に対しての備忘録になります。同じようなことを前にも言っていたかもしれませんがこの先も何回かこんなネタが続くと

思われますのでご容赦ください・・・。それでは本題に入ります。reactの話です。

 

あるコードをgitでマージして取り込んだ後にコンパイルした時の話です。その中でhrefタグで囲んだテキストをクリックすると次ページに

遷移してくれるようなコードを書いたのですがURLのみ変わりページ自体が遷移されないという事態に直面。以下ダメな例↓


<a href="#hoge">

これは、hogeの前に置いてあるシャープがコンポーネント生成を阻害したことで引き起こり、その存在を完全に忘れ去っていたことで

起きてしまったエラーです。遷移したい時は前のシャープを必ず消しましょう。必ずです。今まで自分はreactで使うRoutetとして

HushRouterを使っていたのでシャープが無視されて遷移できてしまっていたのだと思われます。

HushRouterを設定していると上の状態でも遷移してしまうので遷移させたくない時はBrowserRouterを使いましょう。

軽い気持ちで使わずに事前にきちんと調べておきましょうという感じです。(猛省)

 

二つ目はコンパイル時に起きたことなのですが、これもどのタイミングで起きたのかはっきり分からずに解決してしまったので詳細が

分かったらすぐに載せたいと思います。いつも通りcordova run androidをするとこんな感じで赤文字エラーが出ます。

直訳するとandroid-versionsが見つかりません、です。いつどのタイミングでこのパッケージが消失したのかはっきり言って全く分かりま

せん。プラットフォームも入れ直した状態ですし、gitでプルした後も動いていたのでいきなりのエラーに面食らってしまいまいました。

とりあえずサイトに書かれていた通りnpm install android-versionsでパッケージを入れ直して解決・・・しましたがどこかすっきりしない

ですwとりあえず困ったら大正義npm installしてしまいましょう、という感じです。

参考にさせていただいたサイトー>http://kaki.work/2018/07/31/cannot-find-module-android-versions-%E3%81%8C%E5%87%BA%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F/

 

 

 

 

  • この記事いいね! (0)
著者:杉浦

googleスプレッドシートのメール通知機能

 googleスプレッドシートは無料で多人数の共同作業を容易に行うことのできるExcelの様な表を扱うwebサービスです。長期に渡って多人数で共同作業を行う際、編集が行われたことを知る機能の有無は重要です。定期的に見る、ということもできますが手間であり漏れも出がちです。googleスプレッドシートにはgmailに対して通知を行う機能が備わっています。
スプレッドシートの通知をオンにする – パソコン – ドキュメント エディタ ヘルプ
 やり方は簡単。画像の様にツール > 通知ルールと開いて、通知のタイミングを設定、保存、完了するだけです。これでgoogleスプレッドシートを開いているgoogleアカウントに向かって通知メールがルールに従ってその都度送信されます。

  • この記事いいね! (0)
takahashi 著者:takahashi

車用Android向けホームランチャーアプリ”Car Launcher”

Androidタブレットナビ化計画の一環でインストールしたホームアプリをご紹介します!

Car Launcher“というアプリです。

車用ランチャーアプリには、単なるランチャーで、ホームボタンを押すと素のホームアプリに戻ってしまうものもありましたが、こちらのアプリはちゃんとホームアプリとして動作するので、完全に差し替えできます。

デフォルトのUIはこんな感じです。

音声検索や天気、時刻、音楽プレーヤーへのショートカットなどが一通りそろっています。

また、上のAdd App からよく使うアプリケーションを追加できます。

このUIもそこそこ使いやすそうではあるのですが、個人的にデザインがあまり好きではなかったので…

こちらのUIに変更しました。
よりランチャーっぽくなっていい感じです。

Android端末をカーナビ代わりにしている方には是非お勧めです。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova-react】チェックボックス実装

reactを勉強してから今に至るまで数多くのコンポーネントを作っていました。今作っているアプリにチェックボックスが必要ということ

が分かり色々参考にしながら実装することになりました。チェックボックスとはアンケートなどでよく使われる一般的なコンポーネント

で、クリックするとレ点が出現します。これをtrueの状態と呼び、レ点が入っていない時はfalseになっている状態と頭の隅に置いておき

ましょう。今回のポイントとしては以下の2点に重点を置きました。↓

・チェックボックスが一つだけあるフォーム

・trueになった時にある値をsetStateする

チェックボックスが複数ある時はmapでまとめてrenderに描画できるよな、でも単体でも機能してくれるのかな?みたいな疑問が浮かび

ましたが杞憂に終わりました。チェックボックス一つだけの実装はそんなこと考えるまでもなくさくっとできてしまいました。

前置きで黒く箇条書きで書いてしまいましたが大したことではなかったです、すみません・・。


<input type="checkbox" value="1" onChange = {this.onPermission} defaultChecked={this.state.checked} ></input>利用規約に同意する

こんな感じです。もしよかったらコピペして使ってみてください。defaulCheckedで初期値がtrueかfalseか選べます。

 

2点目もそこまで大したことない・・・ですがコンポーネントの作り方自体分からなくて躓いている初心者の方々のためにあえて簡単に

抽象的に説明します。字面通りですがtrueになった時にsetstateで値を飛ばしてあげるという単純明快な行為です。

<pre>  onPermission(e) {
    this.setState({checked: !this.state.checked});
    if (this.state.checked) {
      return;
    } else {
      console.log('success');
      const date = new Date();
      this.setState({permission: date});
    }
  }
</pre>

長ったらしいのは好きでないのでコード載せちゃいますね。(#^^#)

動作はそのまま、onPermissionが押されたらcheckedの値がsetStateされます。手前のビックリマークは現在のcheckedパラメータではない

ほう、つまりデフォルトの値falseの逆の値のtrueをsetStateしますよ!という意味になります。

falseのままだとreturnで何もせず、trueならば現在時刻をsetStateするコードだとはっきり見て取れると思います。

 

確実にこれより綺麗なコードは存在するのですが、僕みたいにreact始めたばかりの方は経験が浅いうちはこれくらいの雑多なコードのほ

うが覚えやすい気がします。

 

  • この記事いいね! (0)
村上 著者:村上

【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コードのススメ」のご紹介でした。
本当に簡単だし、何よりもわかりやすくておすすめです。

  • この記事いいね! (0)
著者:杉浦

php-cs-fixerの設定まとめページphp-cs-fixer-configuratorの紹介

 php-cs-fixer-configuratorphp-cs-fixerの設定をまとめているページです。php-cs-fixerはphpのコードを設定に従って修正してくれるアプリケーションなのですが、大本の設定マニュアルは羅列という言葉が似あうもので読むのが億劫です。php-cs-fixer-configuratorはphp-cs-fixerの設定を読みやすい形でまとめているページです。
 使い方はいたって簡単、次の画像からぱっと見でわかる様に検索して目的のルールを探すだけです。

 各ルールの詳細な説明もあります。次の画像らはblank_line_after_namespaceの説明です。これは名前空間の宣言の後には一行だけ空白行が入る、というルールです。This fixer is not configurableは設定不能というよりも設定不要と読んだ方がいいでしょう。ルールの有効無効だけが選択できます。
 


 プリセットに何が含まれているかを確認することも容易です。

  • この記事いいね! (0)