読者です 読者をやめる 読者になる 読者になる

はやしくんさん雑記

はやしくんさんです

阪大で大学公式の履修管理アプリを作ってた僕の時間割アプリOrario所感

技術系

はやしです. 今年度より東京大学大学院で修士1年生をしています.専攻は化学で,化学の勉強,研究をしています.

学部時代,僕は大阪大学理学部化学科に所属しており,趣味でプログラミングをしていました. そこでやっていた事の一つに,阪大の履修管理システムKOANのスマートフォンアプリの開発があります.

僕の詳しいプロフィール等は http://hayashikun.com にあります.

この記事を書こうと思ったのは,今朝こんな記事を見かけたからです.

news.livedoor.com

続きを読む

コーヒーサイフォンとの運命的出会い

人生経験 ライフハック

熱湯は重力に逆らい、上のガラスボールへと流れていく。

f:id:hayashikunsan:20170317214133j:plain

続きを読む

2016年をサクッと振り返る

人生

1月

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

2月

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

3月

特に何もなし

4月

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

5月

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

6月

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

7月

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

8月

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

9月

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

10月

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

11月

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

12月

単調な毎日.

まとめ

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

CentOS上でMeCab & Python3環境構築

技術系

概要

  • CentOS上にMeCabをインストールし、Python3から仕えるようにする
  • MeCabyumでインストールする
  • /bin/sh: mecab-config: コマンドが見つかりませんで困ってる人は解決するかも
  • 辞書はmecab-ipadicmecab-ipadic-NEologd
続きを読む

完全無欠コーヒーで圧倒的成長し(ようとし)た

ライフハック 人生経験

はじまり

ある梅田のIT企業でバイトをしている僕、ある日健康が趣味の社員さんに「完全無欠コーヒー」なるものの存在を聞いた そこで早速材料を仕入れ、完全無欠コーヒーなる飲料で圧倒的成長をしてみんとトライしたのである

続きを読む

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

技術系

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

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

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

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

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

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

続きを読む

技術系ブログまとめ

技術系

電車の中とかで暇潰しによくfeedlyでTechブログを読んだりしてます TechブログはQiitaとは違って"まともな"記事が多いので、個人的には好きです 主観バリバリですが、僕が読んでるものも読んでないものも含めて紹介していきます

続きを読む