No Pain, No Gain

プログラミングで日常をちょっとだけ楽にしよう。

ReactをjQueryみたいにローカルにインストールせずに使う方法

ReactをCDNを利用して npm でインストールせずに使う方法です。

HTMLファイルへの記述

HTMLファイルの</body>タグの前にて以下のスクリプトを読み込む。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="js/app.js" type="text/babel"></script>

最後の行は自作のスクリプトを読み込んでいる。その際、type="text/babel"となっている点に注意。ReactはJSXでの記述となるので、type="text/javascript"と書いてもコードが解釈されない。

以上の設定でReactが使えるようになる。

スクリプトの書き方

実際にReactでコードを書いていく。

まずはHTMLファイルにReactが操作するdivを作る。

<body>
  <div id="app"></div>
</body>

この例ではappの中にReactが作ったDOMが挿入される。

今回の自作のスクリプトapp.jsという外部ファイルに書く。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Hello World!'
    } 
  }
  
  render() {
    return (
      <div>
        <p> { this.state.text } </p>
      </div>
    )
  }
}
    
ReactDOM.render(
  <App />,
  document.getElementById('app') //htmlの<div id="app"></div>をターゲットに設定している。
);

このように通常のReactと同じように書けば動く。最後の行でHTMLの中の<div id="app"></div>を取得して、その中にReactが作成したDOMを挿入している。

以上でまるでjQueryを使うときみたいに、ローカルにインストールすることなくReactを使用することが出来た。 これで普段自分で使う業務アプリとかも気軽にHTML一枚で作れたり出来ちゃう。

【vue-router】Vue.jsでビルドしたウェブサイトが白紙で表示される場合の対処法 【History Mode】

f:id:hayeta:20171125093338p:plain

Vue.jsプロジェクトで実際にサーバーに載せるにあたってプロジェクトをビルドしますよね。

npm run build

それで/dist/以下に出来たファイルをサーバーに載せ、アクセスすれば作ったサイトが表示されるはずなのに、真っ白なブランクページが表示される。F12で開発コンソールを開いてみても、何のエラーも出ていない。。

という場合はvue-routerHistory Modeをオフにしましょう。

続きを読む

【Web】Vue.jsプロジェクトでGoogle Adsenseを使う方法と注意点

Vue.jsでGoogle Adsenseを使う方法

サイトを作成したら、まぁアドセンス配置しますよね。。

Vue.jsプロジェクトでは下記のプラグインを使用します。

github.com

使い方はリンク先に書いてある通りなのですが、動かすうえで一点だけ注意点がありました。

【もくじ】

続きを読む

【ハイブリッドアプリ】Ionic CLI でとりあえず開発を始めるためのよく使うコマンドのメモ【Angular】

Ionic で新しいアプリを開発する場合のコマンドをメモ。 以下のコマンドをコマンドプロンプトやGit Bashなどのターミナルから実行します。

もくじ

前準備

プロジェクトを作成する前準備として、ionic本体cordova をインストールしましょう。

npm install -g cordova ionic

新しいプロジェクトを作る

ionic start [project name] [ひな形の名前]
ionic start NewProject tabs // 例

ひな形の種類を指定すると、CLIが必要なファイルを作成して新たなにフォルダを作成してくれる。指定できるひな形は以下の通り。

  • blank:何も部品がついていない真っ白なプロジェクトが作成される。
  • tabs:タブが付いたプロジェクトが作成される。
  • sidemenu:サイドメニューが付いたプロジェクトが作成される。

新しいコンポーネントを追加する

ionic generate [type] [name]
ionic generate component NewComponent // 例

以下の type を指定すると、必要なファイルを自動で作成してくれます。 Angular CLIとは違って、 app.module.ts に追記はしてくれないみたいです。

hayeta.hatenablog.com

  • component
  • directive
  • page
  • pipe
  • provider
  • tabs

詳しい説明のリンク先は以下。

ionicframework.com

開発サーバーを起動

ionic serve

ブラウザで localhost:8080 を開くとアプリが表示されます。

アプリをビルドする

ionic cordova build [platform]
ionic cordova build android --prod

--prod オプションをつけるとビルド時にUglifyなどを行ってくれて、アプリの起動がめっちゃ早くなる。

ionic cordova build android --prod --release

リリース用のパッケージを作成したい場合は、 --release オプションをつけましょう。未署名のパッケージファイルが作成されます。

どうでもいいですが component ってタイプしにくいです。。

Angular CLI で取り合えず開発を始めるためのよく使うコマンドのメモ

何度も忘れるのでメモ。 それぞれのコマンドを、コマンドプロンプトやGit Bashなどのターミナルから実行します。

新しいプロジェクトを作る

ng new [project name]
ng new new-project

プロジェクトのひな形が作られる。作られたフォルダ(ひな形)の中に移動して他のコマンドを実行する。

新しいコンポーネントを作る

ng g [type] [name]
ng g component NewComponent

Angularの部品を新たに作ってくれるコマンド。 必要な部品を作ってくれるし、app.module.ts などに追記まで行ってくれる便利なコマンド。

Typeに指定出来るものは以下の通り。

  • Component
  • Directive
  • Pipe
  • Service
  • Class
  • Guard
  • Interface
  • Enum
  • Module

今のところ、ComponentService しか使ったことが無いけど。。

詳細な使い方が載っているドキュメントの場所をメモ。

github.com

開発サーバーを起動

ng serve

AoT(Ahead of Time)機能を有効にしたい場合は以下のようにする。

ng serve --aot

Angular AoTガイド - Qiita

実行するとソースがコンパイルされて開発サーバーでホストされます。 http://localhost:4200 にアクセスするとアプリが表示されます。 ソースコードを変更すると自動で更新されるライブリロードに対応しています。

これだけできれば取り合えず開発を始めることが出来る。

【Cron】ネットオウルのミニバードで定期的にPHPスクリプトを実行する方法

月額がやっすいミニバードでCronを実行する方法。 定期的にPHPスクリプトを実行させてみましょう。

続きを読む

【Node.js】JavaScriptをコマンドプロンプトから実行する方法

最近JavaScript を書くことが多い。そうすると何でもかんでもJavaScriptで書きたくなってくる。

普段使ってるPythonで書いたCUIスクリプトJavaScriptで書けないかなぁ、と探してみるとありました。

JavaScriptコマンドラインから利用する方法。

1.Node.jsをインストール

まずはNode.jsをインストールする。

Node.js

Node.jsは、通常クライアント側で実行するJavaScriptを、サーバーサイドで実行可能にするもの。 Chromeに使われているV8 JavaScript エンジンで動作する。

ターミナル(Windowsコマンドプロンプトのこと)から以下を実行してバージョン情報が出て来たらインストールは無事成功している。

$ node -v
v6.11.4

2.スクリプトを書いて実行する

適当なディレクトリを作成して、スクリプトを書いてみよう。

$ mkdir test //ディレクトリの作成
$ cd test //作成したディレクトりへ移動
$ vim test.js //テキストエディタのVIMで新規ファイルを作成

作った「test.js」の中身は簡単にJavaScriptにしてみる。

var values = [1, 2, 3];

values.map(x => {
  console.log(x);
});

やっていることは、「1,2,3」というNumber型のデータが入っているリストから一つずつ要素を取り出してコンソールに出力している。

これを実行するには、ターミナルから以下を実行。

$ node test.js

// 1
// 2
// 3
// が出力される。

以上です。

すごく簡単ですよね。 毎日使ってるPythonスクリプトも書き直したくなってくる。。 効率性を求めるはずのIT技術のはずが、同じスクリプトを違う言語に翻訳するだなんてなんだか非効率ですよね (笑)

まぁ、楽しいからいいや