はやし雑記

はやしです

vibe.d(D言語製WAF)でWeb開発、DockerでAWSへデプロイ

はじめに

皆さん、vibe.dはご存知でしょうか。そもそもD言語はご存知でしょうか。

D言語 - Wikipedia

C++erがD言語を使ってみて感激した機能 - Qiita

型推論GC、テンプレートやコンパイル時関数実行などもでできて、モダンでCoolな言語仕様の言語です。 個人的には、若干Swiftに似ているかなぁ(D言語がSwiftに似ているのでは無く、SwiftがD言語に似ているのだが)という感じがあります。

残念なことに、D言語はまだユーザーが少なく、Googleにも"dlang"で検索すると"もしかして golang"と煽られる始末で、まだまだライブラリやフレームワークは発展途上です。 そんな数少ないD言語製のWeb Application Frameworkの中で、vibe.dは最も成熟したものだと思います。

vibed.org

先日Pythonで運用していたhayashikun.comのさくらVPSの契約が切れ、もう運用してないWebサービス等もあったので一新しようと思い、vibe.dで実装、dockerでAWSにデプロイしたので、備忘録を残します。

件のhayashikun.comは、以下のリポジトリで公開しております。

GitHub - hayashikun/hayashikun.com

2018年4月22日 追記: 中身もなんもないカスサイトの維持に3000円強/月かかってるのでgithub pagesに移行した

続きを読む

2016年をサクッと振り返る

1月

研究室に配属される.第二志望の研究室で教授の退官が近いので,配属は1人で同期がいない,ぼっち.それに,院進するとしたら研究室変わらないといけないところになってしまった. 研究室入ってちょっと勉強とかしてたら就職するんじゃなくて院進したくなったので就活系を全部辞めた.

2月

学科の友達はみんな結構春休み取ってたけど,特に春休みしたいこともなかったから殆ど毎日研究室行っていろいろしてた. あと,一年ぶりにバイトを始めた.割と有名なIT企業で,時間的にそんなに余裕は無いけど働けてうれしーって感じ.

3月

特に何もなし

4月

4回生になった. 卒業研究を始めた.

5月

人生初の再履バスに乗った. 特に何もなし

6月

院試の事を考えて研究室の見学とか行った.

7月

院試出願を決める.阪大の別の研究室と東大の研究室に出願した.

8月

院試勉強を本格的に開始した.毎日(殆ど)勉強していた. 8月末に院試を受けた.

9月

院試は受かってた. 研究を再開. 東大に進学することにした.

10月

マジでクソな一ヶ月だった.

11月

実験の毎日,特に何もない単調な毎日.

12月

単調な毎日.

まとめ

クソな1年だった.来年はいい年にしたい. 来年も皆さんよろしくお願いします.

DeAGOSTINIの「日本の神社」を約2年4ヶ月かけてコンプリートして得られた知見を共有(自慢)する

いえーい!!!

先日やっとDeAGOSTINIの「日本の神社」をコンプリートしました。 2014年1月28日創刊で、第121号が2016年6月7日発行(5月中に届いたけど)なので約2年4ヶ月かけて……!

続きを読む

TwitterのlikeみたいなエフェクトをJSとCSSで実現する

祝 Twitter10周年!

らしい それに合わせてかTwitterのlikeのエフェクトが変わった

このlike押した時にエフェクトかかるのは去年から

これの仕組みはどうなっているのか、どうすれば自前で実現できるかについて書いていきます

仕組み

このエフェクトはどっちも横長の画像を切り替えて実現させている 旧エフェクトは f:id:hayashikunsan:20160321164758p:plain

新エフェクトは f:id:hayashikunsan:20160321164813p:plain

で成っていて、前者は2900 × 100pxで後者は15960 × 280pxなので、それぞれ29コマと57コマの画像を切り替えてアニメーションにしてる

では、この横長の画像1枚からアニメーションを実現させるのはどうすれば良いかというと、CSSのbackground-positionを使う この属性の詳細はググってみてください

この属性の値を一定時間ごとに変えて、表示させる場所を変えればアニメーションになる

デモ

Twitterの新エフェクトを動かしてみる ソースは

<html>
    <head>
        <style>
            #heart {
                background-image: url(heart.png);
                height: 280px;
                width: 280px;
                animation: like 5s steps(57) 0s 1;
                animation-fill-mode: forwards;
            }
            
            @keyframes like {
                0% { background-position: 0px center; }
                100% { background-position: -15960px center; }
            }
        </style>
    </head>
    <body>
        <div id="heart"></div>
    </body>
</html>
<html>
<body>
<style>
#heart {
    width: 280px;
    height: 280px;
    background-image: url(heart.png);
    background-position: left;
}
</style>

<div id="heart"></div>

<script>
document.getElementById("heart").addEventListener("click", function(el) {
    var offset = 280 * 57;
    var tm = setInterval(function() {
        if (offset == 0) {
            clearTimeout(tm)
        } else {
            el.target.style.backgroundPosition =  offset + "px 50%";
        }
        offset -= 280;
    }, 50);
});
</script>
</body>
</html>

汚いけど許して

前者がCSS3のみを使う場合で、後者がJSを使って頑張る場合 前者のほうがよさ気だけど、IEとか一部対応してなさそう

こんな感じ

実際Twitterの中ではもうちょいいい感じにやってるんだろうけど、こんな感じで簡単に実現できるね!やったね!

OS XでVMにCentOSを入れてC++11の開発環境を構築してipkn/crowでWeb開発を始めた

概要

  • クソみたいな備忘録
  • C++でWeb開発したかった
  • GCCでBoostとかを使いつつC++11で開発したかったがclangとの共存等がちょっとややこしかった
  • VirtualBoxにCentOS7を入れて、バックグラウンドでOSを動かしてSSHで接続するようにした
  • CentOS上でzshvimを導入し、使いやすくした
  • 諸々のソフトウエア等をインストールした

やったこと

VM上にCentOS7をインストール

がんばった(がんばってない、素直にやった)

VMCentOSコマンドラインからWindowを立ち上げずに起動できるようにする

$ cat .zprofile 
alias centos7='VBoxManage startvm CentOS7 --type headless'

これで$ centos7って打つだけで裏でCentOSが起動する この--type headlessってのがキモ

OS XからSSHVMCentOSに接続する

これを参考にすると良いと思います www.task-notes.com

注意点 * enp0s8の設定時に/24を忘れるとダメ * 上で192.168.56.10になっているのは192.168.56.111とかにしたほうが良い

また、OS XからSSHで接続する際に、毎回このアドレスを打つのはだるいので/etc/hosts192.168.56.111 centos7を追記しました こうすれば、SSHで接続する時に楽です

$ cat /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost 

192.168.56.111 centos7

$ ssh root@centos7

zshを設定した

centos zshでググれば設定は沢山出てくるはず 僕の考えたさいつよの設定↓

github.com

vimを入れた

vim力低いのでアレ

$ yum install vim

僕の.vimrc

github.com

CMake 3.4のインストール

yumで入るCMakeはとても古いので、最新版を入れた

CMake

$ cd /usr/local/src
$ yum install wget gcc gcc-c++
$ wget https://cmake.org/files/v3.4/cmake-3.4.3.tar.gz
$ tar xvf cmake-3.4.3.tar.gz
$ cd cmake-3.4.3
$ ./bootstrap
$ make 
$ make install

crowを動かす

今回使いたかったのはこれ、ipkn/crow

github.com

まず、boostを入れる

$ yum install boost boost-devel

バージョン低いけどまぁ我慢、そのうち上げたい

プロジェクトを作っていろいろする ポート番号等は任意で

$ mkdir ~/development/hoge
$ cd ~/development/hoge
$ git init
$ git submodule add https://github.com/ipkn/crow
$ vim CMakeLists.txt
$ vim main.cpp
$ cmake .
$ make
$ .hoge
(2016-03-05 14:36:01) [INFO    ] Crow/0.1 server is running, local port 80

CMakeLists.txt

cmake_minimum_required(VERSION 3.3)
project(hoge)
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11")

find_package(Boost COMPONENTS date_time filesystem system thread REQUIRED)
INCLUDE_DIRECTORIES( ${Boost_INCLUDE_DIR} )

include_directories("crow/include")

set(SOURCE_FILES main.cpp)
add_executable(hoge ${SOURCE_FILES})

TARGET_LINK_LIBRARIES( hoge ${Boost_LIBRARIES} )

main.cpp

#include "crow.h"

int main()
{
    crow::SimpleApp app;
    CROW_ROUTE(app, "/")([]() {
        return "Hello world";
        });
    app.port(80).multithreaded().run();
}

80番ポートを開放

iptablesじゃなくなったっぽいね

$ firewall-cmd --add-port=80/tcp --zone=public --permanent$ iptables -A INPUT -p tcp --sport 80 -j ACCEPT
$ firewall-cmd --reload

あと、VirtualBoxの設定から、ネットワーク→アダプター1→ポートフォワーディングで80番を通しておきます

これでCentOS上でサーバーを動かして、そこにOS Xからアクセスできる!!

f:id:hayashikunsan:20160305235837p:plain

最後に

Pythonで書きます

プログラミングできるようになりたんですが、どうすればいいんですか?ってめっちゃ聞かれるから今後このURL送るようにする

プログラミングできるようになりたんですが、どうすればいいんですか?ってめっちゃ聞かれる

インターン行ってたり、アプリ出したりしてるとおんなじ大学の人とかによく聞かれたりする 相手が女の子の場合は(殆ど無いんだけど)、僕が教えてあげるよ!!ってめっちゃ丁寧なアドバイスしてしまいがちなんだけど、男女差別は良くないのでプログラミングできるようになりたい大学生へのアドバイスを書いておこうと思います

最初に断っておきますが、僕は生活が掛かっているわけでもなく、趣味、遊びでプログラミングしてます 意識は高くないです

初学者の人にはわからない単語みたいなのもたくさん散らばってると思いますが、多分やってればそのうちわかってくると思うので読み飛ばしてください

人によって俺はこう勉強したみたいなのもいろいろなので、いろんな意見のコメント下さい

みんなも気持ちよくなれるプログラミングしていきましょう

続きを読む