2016 9月tatami-code | tatami-code

今回は前置きのみです。
※深夜の駄文です。流し読み程度にしてください。怒らないでください。

前書き
フロントエンド開発環境構築(Prismic.ioの使い方)
EC2にNode環境構築。お名前.comで取得したドメイン当てる。
Nginxリバースプロキシ設定 pm2でデーモン化

前書き

まず、フロントエンドの開発ディレクトリを見てもらいたい。

ついこないだまで

.
├── css
├──　　images
├── index.html
└── js

├── css

├──　　images

├── index.html

└── js

今日この頃

.
├──.babelrc
├──.editorconfig
├──.eslintignore
├──.eslintrc
├──.git
├──.gitignore
├── config
├── deploy_config.json
├── gulpfile.babel.js
├── node_modules
├── package.json
├── prismic-configuration.js
├── public
├── server
└── source

├──.babelrc

├──.editorconfig

├──.eslintignore

├──.eslintrc

├──.git

├──.gitignore

├── config

├── deploy_config.json

├── gulpfile.babel.js

├── node_modules

├── package.json

├── prismic-configuration.js

├── public

├── server

└── source

「ふぁ!!??」

昨今のフロントエンド開発は、ご存知の通りすごいことになっており、nodeなりなんなりでいろんなものを自動化してる。
もはやhtmlを素書している古代文明の人はいないだろう。汗
静的サイトをつくったり、ajaxでapi叩く程度ならフロントで完結するので話は簡単なのだが、
サーバーと連携したシステムを構築する場合、フロントエンジニアとサーバーエンジニアはどうやって仲良くしたらよいのだろうか。

こんなに世の中進化したというのに、CMSとなるとなぜか今もwordpressが根強い。
モダンなwordpressのテーマを作るフローはどうなっているのだろうか。
フロントエンジニアがnode環境で吐き出したhtmlにサーバーサイドエンジニアがphpのタグを組み込んでいるのだろうか？
考えただけでも吐き気がする。jadeなりslimなりで作ったhtmlをその後いじるというのはどう考えてもやばい。
（実際の作業を知らないのでそんなことないと思う。偏見で喋っていますごめんなさい。あったら知りたいです教えてくださいお願いします。切実）

そして苛立ったフロントエンジニアは言った。
「えーい！全てnodeでつくってやる！php消え去れ！」
そしていきついたのが

Express + Prismic.io
である。

AWS EC2でnode環境を構築し
ExpressをたちあげNginxでリバースプロキシを。デーモン化にはpm2のお世話に。
Expressのtemplate Engineにはjadeを使い、
コンテンツ管理にはPrismic.ioを使う。

「こ、これだ！！」

通常静的なサイトを作る時コンテンツ管理はyamlを使っている。（その昔、師匠に教わった）
Prismic.ioを使えば、yamlで使っていたjadeをほとんどそのまま利用できたりする。神のようだった。

ちなみにNodeで作られたCMSはけっこうある。GhostだとかKeystoneだとか他にもたくさん。
色々試してみたがすべてしっくりこなかった。
Ghostはいい感じだったのだが、template engineにデフォルトではjadeが使えず、handlebarsというtemplateを使っていた。pluginでjadeも使えそうだったけれど、ghostの開発者がjadeはロジックが中に書き込めてしまうからよくないみたいなことを言っていたが、使い方次第だと思うし、
僕にとってhtmlにタグが書けますよ的なtemplateは全く求めていなかったので思想が合わないと感じて止めた。
https://github.com/TryGhost/Ghost/issues/1131

そして行き着いたのが prismic.ioだった。
日本語での情報は全く出てこなかったがgoodpatchが社内blogで使っている様子だったので信頼が置けた。
Rubyで利用している様子。

Prismic.io自体はNodeでの開発にも重きを置いている様子？だった。（勝手な偏見かも）
実用的かどうかはサービスの信頼度が不明なのでよく分からないが、使い勝手はとてもすぐれていた。

フロントエンジニアの皆様はCMSをどうしているのでしょうか。

次回は
実際に組み込みの作業をメモがてら書こうと思いますす。深夜の駄文ですた。

そしてこのサイトもその昔wordpressで作った。そのうち殺す。

Pocket

pythonアプリをdesktop化する必要がでたので色々と調べた。
pythonアプリをstandaloneアプリにするツールはいろいろあったけれど、結局pyinstallerを使うことにした。
ちなみにqtcreatorをつかうとGUI作るのまじで楽。

OUTLINE

環境
pyenvで環境作る
PyQt5
pyinstaller
qtアプリケーションを作成
standaloneアプリ生成

環境

MacOSX El Capitan 10.11.5   
python3.5.0 (homebrew pyenv-virtualenv)   
qt5,pyqt5 (homebrew)

MacOSX El Capitan 10.11.5

python3.5.0 (homebrew pyenv-virtualenv)

qt5,pyqt5 (homebrew)

mac環境でpythonのバージョンをpyenvで管理している人はたくさんいる気がするし、pyenvやqtをhomebrewで入れている人は多い気がするのに、まとまった情報は探してもなかなか出てこなかった。

pyenvで環境作る

何も考えずpyenvで入れたpython3.5.0で pyinstaller使おうとしたら
libpython3.4.dylibがないよ！的なエラーが出た。
pythonをframeworkとして入れておかないといけないらしい。
コンパイル周りにも気を使ってpythonをインストールする必要があった。

env PYTHON_CONFIGURE_OPTS="--enable-framework" pyenv install -v 3.5.0
~いろいろいんすとーるする。~
pyenv virtualenv 3.5.0 stand_app

env PYTHON_CONFIGURE_OPTS="--enable-framework" pyenv install -v 3.5.0

~いろいろいんすとーるする。~

pyenv virtualenv 3.5.0 stand_app

そしてこれも。

pip install --upgrade pip

1 2	pip install --upgrade pip

PyQt5

とりあえずinstall

brew install pyqt5

1 2	brew install pyqt5

pyqtはpipでinstallできないぽいので、brewでインストールしたpyqt5をpyenv環境にシンボリックリンクして使えるようにする。

ln -s /usr/local/Cellar/pyqt5/5.6/lib/python3.5/site-packages/PyQt5/ /usr/local/opt/pyenv/versions/stand_app/lib/python3.4/site-packages/

1 2	ln -s /usr/local/Cellar/pyqt5/5.6/lib/python3.5/site-packages/PyQt5/ /usr/local/opt/pyenv/versions/stand_app/lib/python3.4/site-packages/

とりあえずこれで使える。若干きもいが。。

pyinstaller

pyinstaller はpipからinstallできる。

pip install pyinstaller

1 2	pip install pyinstaller

qtアプリケーションを作成

とりあえず簡単なqtアプリをかく。

以下をqt.pyとして保存

<br />import sys
from PyQt5.QtWidgets import (QWidget, QToolTip,
    QPushButton, QApplication)
from PyQt5.QtGui import QFont
from PyQt5.QtCore import QCoreApplication


class Example(QWidget):
  def __init__(self):
      super().__init__()

      self.initUI()


  def initUI(self):

      QToolTip.setFont(QFont('SansSerif', 10)) #font-familyとfontsizeの指定
      self.setToolTip('This is a &lt;b&gt;QWidget&lt;/b&gt; widget')#マウスオンでツールチップを入れる。

      btn = QPushButton('Button', self) #ボタンの生成
      btn.setToolTip('This is a &lt;b&gt;QPushButton&lt;/b&gt; widget') # マウスオンでツールチップを入れる。
      btn.clicked.connect(QCoreApplication.instance().quit) # ボタンを押すと画面が閉じる
      btn.resize(btn.sizeHint()) # いい感じのボタンサイズとボタンのエフェクトを指定してくれる。
      btn.move(50, 50)#ボタンのポジションの設定

      self.setGeometry(300, 300, 300, 200)
      self.setWindowTitle('Tooltips')
      self.show()

if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

import sys

from PyQt5.QtWidgets import (QWidget, QToolTip,

QPushButton, QApplication)

from PyQt5.QtGui import QFont

from PyQt5.QtCore import QCoreApplication

class Example(QWidget):

def __init__(self):

super().__init__()

self.initUI()

def initUI(self):

QToolTip.setFont(QFont('SansSerif', 10)) #font-familyとfontsizeの指定

self.setToolTip('This is a QWidget widget')#マウスオンでツールチップを入れる。

btn = QPushButton('Button', self) #ボタンの生成

btn.setToolTip('This is a QPushButton widget') # マウスオンでツールチップを入れる。

btn.clicked.connect(QCoreApplication.instance().quit) # ボタンを押すと画面が閉じる

btn.resize(btn.sizeHint()) # いい感じのボタンサイズとボタンのエフェクトを指定してくれる。

btn.move(50, 50)#ボタンのポジションの設定

self.setGeometry(300, 300, 300, 200)

self.setWindowTitle('Tooltips')

self.show()

if __name__ == '__main__':

app = QApplication(sys.argv)

ex = Example()

sys.exit(app.exec_())

standaloneアプリ生成

そしてやっとお待ちかねのこれ。
コマンドラインから

pyinstaller --onefile --windowed qt.py

1 2	pyinstaller --onefile --windowed qt.py

どりゃ。
./dist/に
qt.app
ができる！！！！

やったぜ！！