カテゴリー: テクノロジー

時々しかしないので忘れてしまう備忘録シリーズ

Ubuntuへ最新のnginxのインストール

PGPキーを追加

$ curl -s https://nginx.org/keys/nginx_signing.key | sudo apt-key add –

リポジトリ追加

$ sudo sh -c “cat << EOS >> /etc/apt/sources.list.d/nginx.list
deb http://nginx.org/packages/mainline/ubuntu/ `lsb_release -cs` nginx
deb-src http://nginx.org/packages/mainline/ubuntu/ `lsb_release -cs` nginx
EOS
“

nginxインストール

$ sudo apt-get update && sudo apt-get install nginx

 

インストールされたバージョンやオプションを確認

$ nginx -V 2>&1 | sed ‘s/ –/\n –/g’

nginx version: nginx/1.13.4
built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.4)
built with OpenSSL 1.0.2g 1 Mar 2016
TLS SNI support enabled
configure arguments:
–prefix=/etc/nginx
–sbin-path=/usr/sbin/nginx
–modules-path=/usr/lib/nginx/modules
–conf-path=/etc/nginx/nginx.conf
–error-log-path=/var/log/nginx/error.log
–http-log-path=/var/log/nginx/access.log
–pid-path=/var/run/nginx.pid
–lock-path=/var/run/nginx.lock
–http-client-body-temp-path=/var/cache/nginx/client_temp
–http-proxy-temp-path=/var/cache/nginx/proxy_temp
–http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp
–http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp
–http-scgi-temp-path=/var/cache/nginx/scgi_temp
–user=nginx
–group=nginx
–with-compat
–with-file-aio
–with-threads
–with-http_addition_module
–with-http_auth_request_module
–with-http_dav_module
–with-http_flv_module
–with-http_gunzip_module
–with-http_gzip_static_module
–with-http_mp4_module
–with-http_random_index_module
–with-http_realip_module
–with-http_secure_link_module
–with-http_slice_module
–with-http_ssl_module
–with-http_stub_status_module
–with-http_sub_module
–with-http_v2_module
–with-mail
–with-mail_ssl_module
–with-stream
–with-stream_realip_module
–with-stream_ssl_module
–with-stream_ssl_preread_module
–with-cc-opt=’-g -O2 -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC’
–with-ld-opt=’-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now -Wl,–as-needed -pie’

$ dpkg -s nginx

Package: nginx
Status: install ok installed
Priority: optional
Section: httpd
Installed-Size: 2771
Maintainer: Sergey Budnevitch <sb@nginx.com>
Architecture: amd64
Version: 1.13.4-1~xenial
Provides: httpd
Depends: libc6 (>= 2.14), libpcre3, libssl1.0.0 (>= 1.0.2~beta3), zlib1g (>= 1:1.1.4), lsb-base (>= 3.0-6), adduser
Conffiles:
/etc/default/nginx e2b1ae0f31c6d03d3305ef526b0ba3b5
/etc/default/nginx-debug 719f6f9981039a05a64c201a4b1db19f
/etc/init.d/nginx 7224be660d7c280a775bd6eca2547df4
/etc/init.d/nginx-debug 57e8f64b4f464fc13701c6b22240ac10
/etc/logrotate.d/nginx a4da44b03e39926b999329061770362b
/etc/nginx/conf.d/default.conf 411a0b28ff9b21a1cd94a6cb2ae2217d
/etc/nginx/fastcgi_params 4729c30112ca3071f4650479707993ad
/etc/nginx/koi-utf 3e338aca6a53a5420fc791b5ef86f64c
/etc/nginx/koi-win bfa0b80381fed2b1dfcf617b0ba204ec
/etc/nginx/mime.types bd837e7b34f5c9b8d89957d0527f0d44
/etc/nginx/nginx.conf f7984934bd6cab883e1f33d5129834bb
/etc/nginx/scgi_params df8c71e25e0356ffc539742f08fddfff
/etc/nginx/uwsgi_params 88ac833ee8ea60904a8b3063fde791de
/etc/nginx/win-utf 3749ffe19bedd842eb87e83d544e5ce6
Description: high performance web server
nginx [engine x] is an HTTP and reverse proxy server, as well as
a mail proxy server.
Homepage: http://nginx.org

インストールされたファイル一覧表示

$ dpkg -L nginx

/.
/etc
/etc/nginx
/etc/nginx/uwsgi_params
/etc/nginx/mime.types
/etc/nginx/win-utf
/etc/nginx/scgi_params
/etc/nginx/fastcgi_params
/etc/nginx/koi-win
/etc/nginx/koi-utf
/etc/nginx/nginx.conf
/etc/nginx/conf.d
/etc/nginx/conf.d/default.conf
/etc/default
/etc/default/nginx
/etc/default/nginx-debug
/etc/init.d
/etc/init.d/nginx
/etc/init.d/nginx-debug
/etc/logrotate.d
/etc/logrotate.d/nginx
/usr
/usr/lib
/usr/lib/nginx
/usr/lib/nginx/modules
/usr/sbin
/usr/sbin/nginx
/usr/sbin/nginx-debug
/usr/share
/usr/share/nginx
/usr/share/nginx/html
/usr/share/nginx/html/50x.html
/usr/share/nginx/html/index.html
/usr/share/man
/usr/share/man/man8
/usr/share/man/man8/nginx.8.gz
/usr/share/doc
/usr/share/doc/nginx
/usr/share/doc/nginx/CHANGES.ru.gz
/usr/share/doc/nginx/README
/usr/share/doc/nginx/changelog.Debian.gz
/usr/share/doc/nginx/changelog.gz
/usr/share/doc/nginx/copyright
/usr/share/lintian
/usr/share/lintian/overrides
/usr/share/lintian/overrides/nginx
/var
/var/cache
/var/cache/nginx
/var/log
/var/log/nginx
/etc/nginx/modules

起動

$ sudo service nginx start

停止

$ sudo service nginx stop

状態確認

$ sudo service nginx status

Google先生にはいつもお世話になっております。
マエダです。
 
ウェブサイト分析でGoogle Analyticsを利用させていただいております。
Analyticsは最近ホーム画面がリニューアルされたりしてます。
http://web-tan.forum.impressrd.jp/e/2017/06/22/26069
 
詳細分析ではなく日々のPVチェックだけしたい社内のヒト向けにSlack連携をしてみました。
設定手順をご紹介します。
 
1) Analyticsデータを取得する
Spreadsheetにアドオンを入れてAnalyticsデータ取得しましょう。
参考サイト：
https://tonari-it.com/google-analytics-spreadsheet/
 
アドオン入れる
メニュー [アドオン]-[Google Analytics]-[Create new report]をクリック。
Metrics 「Pageviews」を指定してみる。
Dimensions　「Date」を指定してみる。
メニュー [アドオン]-[Google Analytics]-[Run reports]をクリック。
メニュー [アドオン]-[Google Analytics]-[Schedule reports]をクリックして実行時間設定。
 
2) Slackへ投稿するGoogle Apps Script(GAS)を準備する
https://drive.google.com/drive/my-drive
 
左上にある[新規]-[その他]-[Google Apps Script]をクリック。
※ Google Apps Scriptファイルを作成したことがない場合は[新規]-[その他]-[アプリを追加]より「Google Apps Script」を検索追加してください。
 
プロジェクト名　「Daily Analytics Report」 ←　適宜ご変更ください。
 

* Slack API トークン
https://api.slack.com/docs/oauth
以下サイトがわかりやすくトークン発行手順を紹介されてます。
http://www.utali.io/entry/2016/10/03/004421
 
Legacy tokensもあったりします。。。
ご利用はオヌヌメしません。。。”for testing and development”
https://api.slack.com/custom-integrations/legacy-tokens
 
* 投稿先チャンネル名
その名の通り、ご利用のSlackの投稿先のチャンネル名を指定してください。
* 投稿名
Slackに投稿される名前を指定してください。
* スプレッドシートキー
手順1で作成したSpreadsheetのURLのあのあたりの文字列を指定してください。
https://docs.google.com/spreadsheets/d/(このあたりの文字列)/edit#gid=0
 
 
3) 作成したGASのトリガーを設定して自動実行
メニュー [編集]-[現在のプロジェクトのトリガー]をクリック。
実行「postMessage」
イベント「時間主導型」「日タイマー」「(お好みの時間帯)」を指定して[保存]をクリック。
 

 
カンタン3ステップでGoogle AnalyticsとSlackを連携することができました！
 
 
 
え！？3ステップじゃないって！？
 
 
まぁまぁ。。。ヾ(´ε`;)ゝ
 
 
 
上記はあくまで簡易チェックなので詳細チェックはAnalyticsコンソールをご利用ください。<(_ _)>
 
 
本文とアイキャッチイメージは特に関連性はありません。

こんにちわ。
リエです。
 
去年の夏にハデに転んでヒザをがっつりケガしたのですが、その時に「あ〜、これはキズ跡が消えるのに1年はかかるなぁ。」と絆創膏を貼ったヒザを眺めてぼんやりそう思っていました（ネクラちゃん）
 
そして1年たった今。
消えていません(TдT)
どういうことやねんと思いながら、アットノンを毎日塗り込んでいます。
これから薄着になる季節なので、早く消えてくれますようにと願う日々です。
こればっかりは自分では早く消すことはできないんですよね。
 
でも自分で早くできることもあります。（無理やり本題をねじ込む荒業をお許しください）
PCの「キーボードショートカット」※以下ショートカット
PCをよく使用されている方にはおなじみのショートカット。
どれだけ使いこなせていますか？

 
種類はものすごく多いので、全部使っている方はいないとは思いますが、ショートカットを駆使するだけで作業効率はぐんとアップします。
 
このサイトでは、Mac初心者の方が覚えておくと便利なショートカットが紹介されています。
42種類紹介されているのですが、知らなかったショートカットもたくさんありました。
わたしが日々使っているショートカットはほんの一部。
もっと覚えてさらに仕事効率を上げたいと思います٩(๑`^´๑)۶

こんにちは。開発担当のマットです。
 
ゲームが大好きです。
パソコンゲームと最初に出会ったのは子供の頃でした。
父親の事務所にあったパソコンにMS-DOSゲームライブラリーというものがあって、楽しく遊んでいたことを覚えています。
 
ライブラリーには色々なゲームがありましたが、その中でもシミュレーションゲームが特に好きでシムシティのようなゲームに何時間も費やしていました。

遊んできたたくさんのゲームの中で、大きな印象があったのが2001年発のBlack&Whiteです。
ちょっと珍しい設定ですが、このゲームは村の神様として遊びます。
雨を降らしたり、火災を起こしたり、雷を落としたり、様々な神秘的な奇跡を起こすことによって崇拝してもらうゲームです。

でも、一番面白いと思っていたのはゲームの中の村人達でした。
ゲーム用語で、このようなキャラクターは「直接制御できないキャラクターNPC（ノンプレイヤーキャラクター）」といいます。
このゲームの一番の魅力はこのNPC達のAIでした。

なぜなら他のゲームと違って、ある程度自由に動いたりすることができたからです。
村の婦人達が妊娠したり、子供達が遊んで走り回ったり、皆が怖いことから隠れたりして、見るだけでも十分面白いシミュレーションでした。

AIとは何？

AIはArtificial Intelligenceの省略です。
日本語では、「人工知能」と訳されています。

ゲームのAIは「知能」の意味が曖昧で中々定義しにくいですが、環境に反応して目的を果たそうとするものはAIと言っていいかと思います。

上記で取り上げたBlack&Whiteの例では、村人達の目的は単純に無事に幸せに生きて子供を残すことだけでしたが、そのことでゲームに個性が生まれて楽しく遊ぶことができました。

この記事で紹介するAIの例

この記事では、上記のようなAIプログラムの基本を説明したいと思います。
実際のコードは使いませんが、AIの基盤がわかるとプログラミング言語を１つでも知っていれば、誰でもAIスクリプトを書くことに挑戦できると思います。

上記のゲームと同様で自由勝手に動く人間(NPC)のAIの例で進めたいと思います。
何らかの設定が必要なので、「無人島に流された」という設定を使いたいと思います。

ゲームAIの分解

AIのプログラムは５つの段階に分けることができます。

1. Sensing – 感知する
2. Conditions – 条件を生成する
3. State – 状態を選択する
4. Schedule – （適切であれば）新たなスケジュールを選択する
5. Task – タスクを実行する

定期的にスクリプトをコールして、これらの段階を順番に実行していきます。

1. Sensing – 感知する

まず一番最初にするのは「感知」です。
NPCはただの人間で全知の超能力者ではありません。
そのNPCは何を見えるか、何を聞こえるかをリストアップし、もしNPCの近くにココナッツの木やビーチで歩いているカニがいたら、それらをNPCの感知リストに載せる。

逆に島の反対側にいるイノシシは見えないし聞こえないので、感知リストには載せません。

2. Conditions – 条件を生成する

次は感知したものリスト一覧で様々な「条件」を生成する。
例えばカニが見えるので「食物が見えるか」の条件をtrueと定義する。
同じくココナッツが見えるので「水分が見えるか」の条件もtrueと定義できる。
その反面イノシシのような獣は感知していないので「危険な動物がいる」の条件をfalseと定義する。

3. State – 状態を選択する

次はNPCの状態を選択する。
まずは「通常」ですが、もし近くにいる危険な動物を感知したら「危険な動物がいる」という条件がtrueになります。
もちろん危険動物が近くにいると振る舞いが変わるので、NPCの状態(State)が「通常」ではなくて「注意深い」になります。

「注意深い」になっている間は、音を立てずに忍足で歩くなど行動が変わります。

一つの状態の種類だけだと足りないかもしれないので、さらに分けることができます。
例えば「心理の状態」と「健康の状態」など。

4. Schedule – スケジュールを選択する

スケジュールとは一つの目標のことです。
上記で定義した条件と状態の元で決めます。

例えば水分が近くにあって喉が乾いている場合、水分を取りに行くというスケジュールを決定する。

基本的にスケジュールが決定されたら、そのスケジュールを最後までする。*1
つまり水分を取りに行っている途中、お腹が空いてもスケジュールは変更しません。
まず水分を獲得してから食料を取りに行けばいい。*2

しかし「割り込み条件」(Interruption)という特別な条件が成立したら、途中であってもスケジュールを変更する。
例えば蛇に噛まれた場合は水分獲得をやめてケガを治療するスケジュールに切り替えるべき。

*1: これは柔軟なルールです。途中で再検証すべきスケジュールもあると思います。
*2: ただし「餓死しそう」のような「割り込み条件」が成立したらスケジュールを変更すべきです。

5.Task -タスクを実行する

スケジュールは一つか複数のタスクで成り立っています。

例えばココナッツの水分を獲得するのに、以下のタスクがある。

• 木まで歩く
• 木を登る
• ココナッツを取る
• 木を降りる
• ココナッツを割る
• 飲む

「割り込み条件」によってスケジュールが変わらない限り、これらのタスクを１つ１つ順番にやり遂げるだけです。

まとめ

ゲームを開発する際、気の利いたAIが必要で欠かせない場合がたくさんあります。

プログラマーとして「あ！動いた！」の瞬間が一番楽しいと思うので、実際に動き回るバーチャルな人間のようなNPCをコーディングすることはとても楽しいです。
興味がある方は実際にプログラムでも書いてみるのはいかがでしょうか。

HTMLメールをスマホでみて文字が小さい…
PCとスマホ両方対応しようとしたら、文字が小さくなった…
などといった経験をしたことがないでしょうか？

 

PCで見ると普通なのに、幅を600px等に指定してスマホで見ると文字が小さくなります。
iPhoneのデフォルトのメーラーだと以下の様になります。
（幅を指定していなくても大きめの画像を表示しただけでも、文字が小さくなるようです。）

単純にフォントサイズを大きくすればいいかもしれませんが、そうすると今度はPCで文字が大きくなりすぎてしまいます。

 

その回避方法としてtableタグに「width=”600″」や「style=”width:600px;”」を使わずに、「style=”max-width:600px;” align=”center”」を指定してみましょう。
そうすると、スマホでは、文字の大きさは縮小されずに表示され、PCでは、幅600pxで画面の真ん中に表示されるようになります。

 

しかし、、、
outlookでは、max-widthに対応していないため、幅いっぱいに表示されてしまいます。

ビロ～ン (ノД｀lll)

 

outlook2016などを無視していい案件であればこのままでもいいのですが、そういうわけにいかない場合、条件付きコメントを使って、そこにテーブルタグで囲う事で幅を固定できます。

<!-- [if (gte mso 9)|(IE)]>
outlook用のコードを記入
<![endif]-->

「gte mso 9」は「Outlook 2000 – Version 9以上」という事のようです。
【参考】Outlook Conditional CSS

 

具体的に次のように書くとoutlookでは、幅600pxで表示されます。

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="width:600px;"><tr><td>
<![endif]-->

<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;background-color:#ffffff;" >
  <tbody>
    <tr>
      <td>
        <h1>タイトル（h1タグ）</h1>
        <p>紹介文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト（pタグ）</p>
        <img class="content-banner-img" src="https://placehold.jp/600x300.png" alt="" />
      </td>
    </tr>
  </tbody>
</table>

<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

フォントサイズで困っている方は一度試してみて下さい！

 

表示確認ができるサービス

HTMLメールを表示確認する有名なサービスとして、下記の2つがあります。
使ってみると、想定外な所が崩れている…ということがあるので、使ったことが無い方は1度試してみるのもいいかもしれません。