月別アーカイブ 10月 2018

村上 著者:村上

【Android】「Configuration on demand is not supported by the current version of the Android Gradle plugin since you are using Gradle version 4.6 or above.」の対処法

今回も、Android Studioでアプリを開発中に遭遇したエラーについてです。
最近、何だかエラー遭遇率が妙に高い気が…。
特に、変なところをいじってはいないはずなので、気のせいだと良いのですが。

さて、今回のエラーはこちら。

Configuration on demand is not supported by the current version of the Android Gradle plugin since you are using Gradle version 4.6 or above.

先日まで動いていはずなのですが、今日起動してビルドしようとしたところ、上記のようなエラーが出ました。
こちらをGoogle翻訳に掛けた結果は、「Gradleバージョン4.6以上を使用しているため、Android Gradleプラグインの現在のバージョンではオンデマンドでの設定はサポートされていません。」とのこと。
どうやらサポートされてない設定を使っているようでした。
…なぜ急に?

 

で、調べたところ下記の記事がヒットしました。

Configuration on demand is not supported by the current version of the Android Gradle plugin – Stack Overflow
https://stackoverflow.com/questions/49990933/configuration-on-demand-is-not-supported-by-the-current-version-of-the-android-g

この記事によると、まず、gradle.properties で指定している「org.gradle.configureondemand」という記述を削除します。
が、上記に該当する記述は見つからず…一旦、置いておくことに。

そして次に、Setting から、Build, Execution, Deployment > Compiler を開きます。

そうすると、下の方に「Configure on Demand」という箇所があるので、ここのチェックを外します。
上の画像だと、赤枠で囲っている場所です。
あとは、Apply を押してから、OKを押せば設定は完了です。
その後、いつも通りビルドを行ったところ、問題なくビルドが成功し、無事にアプリも実行できました。

 

以上、「Configuration on demand is not supported by the current version of the Android Gradle plugin since you are using Gradle version 4.6 or above.」エラーの対処法でした。
エラー文だけでは意味が分からなかったのですが、案外あっさりと解決できたので良かったです。
自分が書いたコード以外のところでエラーが出ると若干ヒヤッとしますね…。
もし同じエラーでお困りの方がいらっしゃいましたら、参考にしていただければと思います。

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

mineo の通信最適化を無効化する設定

Windows 10 October 2018 Update。いやー、HDD 利用者には負担が大きかった。PC使いながらダウンロード&インストールに1時間、再起動途中の摘要に3時間。自宅のSSDなPCは30分程度ですべて完了したのに、HDD利用者には負担が大きい。

さて、以前問題になった無告知での mineo の通信最適化。利用者側で設定を解除できる機能が用意されました。写真の劣化は辛いもんがあるので、嬉しいです。しかし常時SSLなんとかといった TLS 通信が増えたおかげで、あまり最適化サれていないかもしれませんけどね。

mineo traffic optimization

mineo traffic optimization

 

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

【React】「react-router」でLinkタグを使わないページ遷移の方法

昨日の記事に引き続き、今回もReactでのページ遷移の方法について。
前回は、Linkタグでのページ遷移について書きましたので、今回は関数内でのページ遷移方法についてです。

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

【React】「react-router」でのページ遷移の実装方法

 

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

react-routerのページ遷移をhandleで行う時にはwithRouterを使う – Qiita
https://qiita.com/junara/items/a4a98c27dc23fd53ebb9

ベースとなるページは前回の記事で作成したものを、ほぼそのまま流用します。

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import Detail from './Detail'
 
const App = () => {
  return (
      <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
                <li><Link to='/friends/10'>Friends</Link></li>
                <li><Link to='/detail'>Detail</Link></li>
            </ul>
            <hr />
 
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/friends/:ids' component={Friends} />
            <Route path='/detail' component={Detail} />
        </div>
    </BrowserRouter>
  );
}
 
const Home = () => (
  <div>
    <h2>Home</h2>
    Homeページです
  </div>
)
const About = () => (
  <div>
    <h2>About</h2>
    Aboutページです
  </div>
)
const Friends = ({ match }) => (
  <div>
    <h2>Friends</h2>
    Friendページです{match.params.ids}
  </div>
)
export default App

追加しているのは、Detailページとそのページへのリンクです。

そして、そのDetailのページがこちら。

import React from 'react';
import { withRouter } from 'react-router';

class Detail extends React.Component {
  handleToAboutPage = () => {
    this.props.history.push('/about')
  }

  render() {
    return (
      <div>
        <button onClick={this.handleToAboutPage}>
          aboutページへ
        </button>
      </div>
    )
  }
}

export default withRouter(Detail)

こちらはAboutページへ遷移するためのボタンが表示されたページです。

上記のコード通り、関数でページ遷移を行うときは、6行目の this.props.history.push([遷移先ページ]) を使います。
ポイントは、最後のexport defaultで指定している Detail を withRouter で囲っている点です。
ページ遷移を実装するときには、こちらの処理が必要になります。
なお、今回別ファイルでDetailページを作成したので、ベースとなるページの3行目にある通り、Detailページを import する作業をお忘れなく。

 

以上、Linkタグを使わずに、関数内でページ遷移を行う方法でした。
ただ、サンプルコードをそのままコピーしただけなので、ベースのページとは少し書き方が違っています。
ベースページでは、const を使っていますが、Detailページでは class を使っているんですよね。
Detailページもベースに合わせたいのですが、書き方が違うのか、const で宣言すると、エラーになってしまい…只今修正中です。
それとも、この書き方でなければいけない何かがあるのかも?
とりあえず、引き続き調査したいと思います。

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

無料DDNSサービスのMyDNSがLet’s Encryptのワイルドカード証明書取得の自動化をサポート。

個人的にもいろいろなところでお世話になっている無料のDDNS(Dynamic Domain Name Server)、MyDNSがLet’sEncryptのdns-01認証の自動化に対応したようです。

MyDNS

2018.07 Let’s Encrypt用API提供開始
Let’s Encryptで、DNS-01方式でサーバー証明書を取得する場合の、–manual-auth-hookならびに–manual-cleanup-hook用のスクリプトをGitHubに公開しました。
詳しくはREADMEをお読みいただければわかるかと思いますが、これによりワイルドカードのサーバー証明書の取得および更新が非常にしやすくなったかと思います。
どうぞご活用ください。

MyDNSとは、自宅サーバ勢御用達の無料DDNSホスティングサービス。
DNSホスティングとの違いは、定期的にサービスに対してIPアドレスを通知することにより、IP固定契約をしていなくても自分の回線とドメイン名を継続的に紐づけることを可能にしている点です。

管理画面からの変更もできますが、プログラムからも通知できるような仕組みを供えているので、cronなどを利用すれば特に操作しなくてもサーバーからMyDNSに対して継続的にIPアドレスを通知し続けることもできます。

一方Let’s Encyptは一定の条件を満たせば無料でSSL証明書を発行してもらうことができるサービス。
以前にも何度か取り上げていますし、ご存知の方も多いかと思いますが、最近はワイルドカード証明書の取り扱いも開始し、ドメインごとにSSL証明書を取得する必要がなくなりました。

ただし、このワイルドカード証明書をLet’s Encryptで取得するためには、DNSサーバの設定を操作して指定された値を登録することでドメインの所有権を確認する”dns-01″方式で認証する必要があります。

また、DNSサーバーに設定する値はドメインの更新時も変化するため、更新のたびにDNSサーバーの値を書き換える必要があり、Let’s Encryptの証明書期限も3か月しかないため、かなり大変でした。

今回、MyDNSが自動更新に対応したことにより、スクリプト一つで自動的にLet’sEncryptから指示された値を自動的にMyDNS側に登録することができるようになったため、一度成功させてしまえば以降はユーザーの操作が一切なくても継続的にワイルドカード証明書の取得、更新が可能となりました。

次回の記事で、実際の設定方法をご紹介したいと思います。
もし待てない、という方はMyDNSさんのGitHubリポジトリに方法が記載されていますので、そちらをご参照いただければと思います。

DirectEdit – GitHub

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

Pythonの紹介

 Pythonは次の謳い文句で宣伝されているプログラミング言語です。

Python is a programming language that lets you work quickly and integrate systems more effectively.

 Pythonは膨大なライブラリと短く単純な文法が特徴の言語です。lets you work quicklyという部分は、素早いコーディングを実現させる、という訳が適当だと思います。
 現在の最新安定版である3.7の標準ライブラリのリファレンスはPython 標準ライブラリ — Python 3.7.1rc1 ドキュメントです。標準ライブラリとある通り、Pythonには最初からこれらの40章近くからなる幅広い関数が用意されています。この関数には高級なものが多くあり、この標準ライブラリを使うだけで簡単にコードを記述できます。例えば、あるurl(src_url)に置いてあるデータを取得して、ファイル(dst_file)に保存する動作は次の三行で記述できます。

data = urllib.request.urlopen(src_url).read()
with open(dst_file, mode="wb") as f:
    f.write(data)

 この様に何か簡単な課題を解決するためにちょちょいとプログラミングするという目的にpythonは非常に適しています。また容易にコーディングが可能という利点は、機械学習関連の学者、研究者の様なプログラミングが必須であるが、プログラミング以外の部分を主に考えたい人達にも人気の様です。少なくともユーザは増えています。スクリプト言語をいくつか比較したgoogle trendが次の画像です。

 標準ライブラリのみでは足りない時はPyPI – the Python Package Index · PyPIを参照しましょう。このサイトには数多くの外部ライブラリがアーカイブされています。
 便利なpythonですが、実行速度が遅いという欠点もあります。ループ速度の比較がヒットする様にググるとpython敗北の記事はいくつも出てきます。

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

【cordova/react】create-react-app内でもjqueryしたい!!

jqueryは通常、ファイルをダウンロードしてhtmlに組み込むかcdnでリンクを作り(下のコード参照)

これをそのまま貼って使う方法があります。

 

create-react-appで作ったアプリでもhtmlで組み込めそうだと思い、jquery公式ページでダウンロードしたjquery3.3.1ファイルを

index.htmlが入っている場所publicフォルダ内に入れて、生成されたindex.htmlのコードに埋め込もうとしましたが$ is not defined

怒られてしまいました。

 

最初からcreate-react-appで作ったindex.htmlは、タグ内の要素を組み込んで表示することしかしてくれないので読み込んでくれないみたいです。

 

共存させるには、npmを使ってjqueryをインストールする必要があります。

コマンド内でnpm install jqueryと入力してenterキーを押せばすぐに最新版をダウンロードしてくれます。

そして、jqueryを使いたいjsファイルに下のように定義します。


import $ from 'jquery';

これでreact内でもjqueryを使ったajaxの通信も問題なくできるはずです。

同じjqueryでもzeptoのほうが軽く、最初はそっちを入れたのですがcreateelement辺りでバグっぽいのがあったのでやめました。

reactでもjquery使いたい!という方は是非試してみてください、それでは。

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

【React】「react-router」でのページ遷移の実装方法

今回はタイトルにもある通り、CordovaとReactで作成しているアプリにページ遷移を導入する方法についてです。
流石に1ページだけではアプリらしくないですからね。

なお導入方法について、参考にさせていただいた記事はこちら。

react-router@v4を使ってみよう:シンプルなtutorial – Qiita
https://qiita.com/m4iyama/items/b4ca1773580317e7112e

 

さて、導入ですが、まずは下記のコマンドで react-router-dom をインストールします。

npm install react-router-dom

事前準備はこれだけ。
あとは、実際にコードを書いていきます。

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'

const App = () => {
  return (
      <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
                <li><Link to='/friends/10'>Friends</Link></li>
            </ul>
            <hr />

            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/friends/:ids' component={Friends} />
        </div>
    </BrowserRouter>
  );
}

const Home = () => (
  <div>
    <h2>Home</h2>
    Homeページです
  </div>
)
const About = () => (
  <div>
    <h2>About</h2>
    Aboutページです
  </div>
)
const Friends = ({ match }) => (
  <div>
    <h2>Friends</h2>
    Friendページです{match.params.ids}
  </div>
)
export default App

ちなみに、上記のファイルを実際に画面に表示しているのはこちらのコードです。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';  // 上記のコードが書かれたjsファイル

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

ほぼサンプルコードのままですが、動作を理解するにはぴったりです。
まず、 BrowserRouterタグで一番外側を囲い、Routeタグで表示させたいページとそのURLを指定しています。
リンクについては、Linkタグを使います。
こちらは、HTMLのaタグとイメージが近いと思います。

また、ページ遷移をした際、値を渡すことも可能です。
11行目のfriendsページへのリンク先のように、ページ名の後に /[値] と指定します。
また、16行目のように、URLから値を受け取れるようにします。
そして、受け取った値は、34行目からのFriendsページで取得・表示をしています。
今回は、値を表示させているだけですが、値によって表示するデータを変えるなどの処理が行えます。

基本的なことは、以上が分かっていれば問題なく実装できるかと思います。

 

以上、react-routerでページ遷移を実装する方法でした。
次回は、Linkタグを使わずに、関数内でページ遷移する方法についてご紹介できればと思います。

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

【cordova react】index.htmlをいじってヒヤッとなった話

jqueryを入れたくてpublic内のindex.htmlをいじっていたのですが、中々上手く導入いかずタグら辺をころころいじっていたら

Parse error:syntax errorというエラーに遭遇。

本来はphpでみるタイピングミスの際に吐かれるエラーみたいです。

どうやら、index.html内のや

http://src/jquery.3.3.1.jsの上に

持ってきてしまい、タグを読み込めなくなったのが原因みたいです。

jqueryを中々読み込めないからとむやみにタグを動かすと思わぬエラーに遭遇するので、これからjquery系を入れようとする人は

上記のことを意識しながらjqueryやzepto.jsを入れてみてください。

 

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

javascriptの関数定義と巻き上げ

 javascriptの関数定義は、関数宣言を行う方法と変数に関数式を格納する方法の二種類に大別できます。

//こちらは関数宣言
function hoge(){
	console.log('hoge declare');
}
//こちらは関数の式を変数に格納
hoge = function(){
	console.log('hoge expression');
};

 関数宣言を行った場合に起きる動作が巻き上げです。巻き上げは関数宣言を行った場所に関係なくプログラムの最初で関数を定義します。このため

hoge();

function hoge(){
	console.log('hoge declare');
}

は実行したい関数の中身が実行され、

hoge();

hoge = function(){
	console.log('hoge expression');
};

は実行したい関数の中身が実行されません。
 関数を先に書いて主となる実行部分を後に書くことが必須ないし推奨の言語は少なくない(python、シェルなど)ですし、関数式による定義の使用はそうそう問題にならないでしょう。むしろES6で追加されたconstを用いれば再定義を防げるので良いくらいです。問題になるのは関数宣言と関数式による定義を混在と関数の再定義が合わさった場合です。そうそう起きない事態ですがこれが起きた場合、非常にわかりにくいソースコードができます。

function hoge(){
	console.log('hoge declare 1');
}
hoge();
hoge = function(){
	console.log('hoge expression 1');
};
hoge();
function hoge(){
	console.log('hoge declare 2');
}
hoge();
function hoge(){
	console.log('hoge declare 3');
}
hoge();
hoge = function(){
	console.log('hoge expression 2');
};
hoge();

 実行結果が一瞬でわかる人はそういないでしょう。読み解き方は最後の関数宣言を記憶して、関数式の代入の度に再定義する、というものです。実行結果は次の通りです。

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

Laravelの設定ファイルがわかりづらい。

最近Laravelを触り始めた、Laravel初心者です。

fuelPHPなどのフレームワークはconfig周りをまとめたフォルダがあり、Laravelにもドキュメントルート下にconfigというフォルダがあり、

DOCROOT/config/database.php

を書き換えればデータベースに接続できるものだと思っていました。
ところが、database.phpの情報を書き換えた後、

php artisan migrate --seed

を実行したところ、Connection refusedエラーが。
確認したところ、実際にプログラムに渡されている値がdatabase.phpで定義されているものではなく、規定値のままになっていることがわかりました。

更にいろいろ調べたところ、Laravelでは下記の操作が必要であることがわかりました。

・ドキュメントルート直下の .env.example を .env にリネームする。
・.env内にもDB接続先の指定があるため、その項目を書き換える。
・php artisan config:cache コマンドを実行して、設定のキャッシュを作り直す

今回の場合、この手順でデータベースの接続先設定を書き換えることができました。

一方、configフォルダの方の設定はどのように使用するのか、まだ調べ中です。

正直、個人的に2箇所に設定ファイルが存在しているのはちょっとわかりづらい気がするのですが、どうなんでしょう…

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