はやし雑記

はやしです

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送るようにする

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

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

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

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

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

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

続きを読む

僕の2015年の就活とか開発について振り返る

はじめに

もうすぐ2015年も終わりですね。皆さん今年はどうでしたか?

僕の今年の目標は楽しむ!でした。

その一環としてパソコンカタカタしまくって、それに伴って就活関連でいろいろ楽しんだ一年なので、忘れないうちに振り返っていろいろ書いておこうかなと思います。 意識は高くないです。

ITベンチャーとか、エンジニアインターンに興味のある人、エンジニア就職したいなぁとか思ってる人に参考になる話や、あんまりITベンチャーに興味無い人(特に阪大生!)に興味持ってもらえるような話がしたいなと思います。 また、同年代の全く違うクラスタの人たちにもこういう人種がいて、こういう事考えて、こんな楽しい事してるんだよっていうのがお伝えできればと思っています。

(もうひとつの動機として、このブログにあった技術系の記事を全部Qiitaに移してしまいこっちが空になってしまい寂しいのでなんか書きたいなぁとか思ったのもあったり…というか技術系Qiitaに書くようになったしこっち何書こう…小説でも書くか…)

続きを読む