Yuto.log

Blog

  • Re:Github-pagesでblogを立てた

    テスト期間中ではありますが、今年も12月になってしまいました、なぜクリスマスに縁のない人類がクリスマスまでカウントしないといけないのか、私には全くわからないわけですが、去年に引き続き今年も東京高専プロコンゼミではアドベントカレンダーをやるみたいです、ところで今年はカレンダーが２つあるので勢いで1,2,12,21日目合計四日間分抑えてしまいましたのでとにかく書かなければなりません。

    さてお約束、
    この記事は東京高専プロコンゼミ(SPC同好会) その１ Advent Calendar 2018 1日目の記事です

    (今年はその２もあるみたいです)

    動機

    タイトルがRe:なので察した方は察したと思いますが実は去年のアドベントカレンダーでも、GitHubPagesを使ってblogを作ることを記事(魚拓)にしていたのですが、見てもらえればわかりますがそれから一年間投稿なし、何故か？

    ディスアド

    • 不便 => 投稿するのにマークダウン作成するだけでなく、色々いじる必要があった
    • ダサい => デザインセンスがないのでお察し
    • パフォーマンスが悪い => ajaxでマークダウンを取得して”フロントで”htmlに変換->表示みたいなことをやっていた、表示するのに時間がかかった

    =>　完全に”四角い車輪の再発明”だった

    GitHubPagesなどの静的ホストでブログを運用するためのプロジェクトはすでにある、OSSのありがたみを感受すべきだった

    というわけでA fast, simple & powerful blog frameworkであるHexoを使ってブログを立てたというお話

    Hexo

    普通は(というかPagesのデフォルト)でメジャーなjekyllというのがあるのですが、なんとなく癪なのでHexoを使うことにしました
    docs GitHub

    トップページを要約すると、
    速い
    マークダウンサポート
    簡単にデプロイできる
    プラグインが豊富

    やるべきこと

    sudo pacman -S yarn
yarn global add hexo-cli
hexo init blog
cd blog
yarn install

#開発用サーバー
hexo server

#静的ファイル生成
hexo generate

    これだけ!簡単!!

    実際はこの他にymlの設定フィアルをいじっています,まあ直感的なのであまりつまることは少ないと思います。

    投稿方法

    hexo new hoge-title

    sources/_post/hoge-title.mdが生成されます
    そのファイルを普通のマークダウンと同じように編集すればよいだけ

    テーマの導入

    はじめは見た目で選んでmaterial-flowにしようとしたのですがドキュメントが中国語なのと完成度か低い部分があったのでGitHubスターでソートして最終的にnextにしました満足

    導入方法はドキュメントに書いてあるとおりとても簡単、OSS素晴らしい

    GitHub Pagesに乗っける

    GitHub Pages、GitHubが静的サイトのホスティングをやってくれるやつ.
    今回は静的ファイル生成先を/docsにしてそこをGitHubPagesに乗っけてもらってます

    ファイルはすべてGitHub tyuto/blogに上がってます

    無料ドメイン

    GitHub students + namecheapでもらえる.meドメインを使っています,ただ1年間しか無料でないのでその後は20＄くらい払う必要があります、まあしょうがない

    終わりに

    なんかしょぼい記事になってしまった気がするのですが、勘弁してください明日はちゃんと書くので勘弁してください。
    あとはじめにも書きましたが、東京高専プロコンゼミアドベントカレンダー、今年は２つあるのですぜひ合わせてそちらもご覧ください。
    今日(12/1)
    * その1 => これ
    * その２の記事 => @kimotoyanke

    明日 (12/2)
    * その1 => @stop_pattern
    * その2 => 自分()

  • github.io(github pages)を使ってblogを作った話

    この記事は東京高専spc同好会アドベントカレンダー22日目の記事です。

    blogを作りたい

    adventカレンダーを~~書くことを強制された~~書く必要があったのですが自分はblogを持ってないのでblogをつくろうと、そういう話です。

    blogを作るのはいいのですが、無料ブログは細かくいじれない、レンタルサーバーはお金がかかる、ということでgithubpagesでblogを作ろうと思ったわけです。

    github.io (githubpages)って何

    ここに詳しく書いてありますが、githubリポジトリに公開したら簡単にwebページを公開できるサービスでhtml,css,javascriptなど静的なwebpageだったら無料でwebpageを作って公開することができます。

    marked.js

    流石に毎回htmlで書くのはだるいのでmarkedownで書けるようにします、marked.jsを読み込むとmarked({markdownの何か})でclient側でmarkdownをhtmlに変えることができます。
    まだsyntax highlightがうまく表示されなかったりして別の何かで処理をする必要があるのですがまだ実装していません。

    ディレクトリ構成

    dir

    詳しくはgithub

    /md/{日付}.mdにmarkdownで書いた記事、/post/{日付}/index.htmlにそれを読み込むhtmlファイルがおいてあります。
    toppageではlistにかかれている最新の記事を5個表示するようにしています~~まだ5記事も投稿してないからundefindと表示されてしまったり~~

    自動投稿(自動投稿)

    ここで言う自動投稿はmdを書いただけでディレクトリを適当に作ったりgit push をしたりするものであって,ある時間になると投稿されるといったものではありません。
    ブログを投稿するのにいちいちfileを加えたりするのがめんどくさいので自動投稿用のshellscriptを書きました。はじめはpythonで書こうと思ってたのですがpythonでgitをいじるのがあまりスマートではなかったのでshellで書くことにしました

    mkdir "./post/${1}"
cp -r "./post/format/index.html" "./post/${1}/index.html"
sed -e "s/{title}/${2}/g" "./post/${1}/index.html" >> "./post/${1}/index.html"
sed -e "s#{url}#../../md/${1}.md#g"  "./post/${1}/index.html" >> "./post/$1/index.html"
sed -i "1s#^#md/${1}.md\n#" "list"
git add "post/${1}/index.html"
git add list
git add "md/${1}.md"
git commit -m "[post] ${1}"
git push origin master

    sed

    commandで文字置換ができるやつです、今回はコピペコードですけど色々できそう

    画像に関して

    画像をgithubに上げると容量を圧迫しそうなので、googledriveにあげてそこからリンクを貼って表示しています。

    Google Drive に保存した画像を直接呼び出せるURLの取得-qiita

    回線ほしい

    これから実装したいこと

    • 一般的な自動投稿
    • syntaxhighlight
    • 同じ環境で表示されるmarkdown editor
    • イケてるui(?)
    • 速度(ajaxで同期処理をしてたりしてる気が)

    気づいたこと、感想

    • shell だと　” と　’ で挙動が違う？
    • イケてるデザインにするのって難しい(知識とセンスが必要)
    • vpsほしい

    追記

    非常にイケてない
    ![非常にイケてない](http://drive.google.com/uc?export=view&id=1g9vAH6EwDT-v7Omm1jwkYM7FLMoN5Sy

  • Atcoder-ABC82に参加した話

    blog初投稿です、

    まだ自動で投稿する機能はできていないので手動で投稿すると思います。
    markdownも書き慣れてないところがあるので見苦しいかもしれないですが生暖かい目で見守っていただけると幸いです。

    ABCってなんぞやって人はここにくわしい説明がのっているので一読推奨です

    A問題

    ２つの数の平均値を切り上げた値を返す問題でした。

    “`python:A.py
    import math
    a , b = map(float,input().split())
    print(math.ceil((a+b)/2))

    <pre><code><br />切り上げの関数がいまいち自信がなくてしらべたので少し時間がかかってしまいました。

    ## B問題
    文字列sとtが与えられてそれぞれ入れ替えていいので辞書順でs &lt; tにすることができるかという問題でした。

    “`python:B.py
    s = input()
    t = input()
    sli = list(s)
    tli = list(t)
    sli.sort()
    tli.sort()
    tli.reverse()
    def tostr(lis):
    hoge = “”
    for i in lis:
    hoge += i
    return hoge
    tstr = tostr(tli)
    sstr = tostr(sli)
    if tstr > sstr:
    print(“Yes”)
    else:
    print(“No”)

    コードが長い気がしますがac出せました

    C問題

    数列が渡されてその数列から良い数列にするために最低限取り除かないといけない要素数を答えるという問題でした。

    python:C.py
    N = int(input())
    ali = list(map(int,input().split()))
    sali = sorted(ali)
    now = None
    num = []
    suu = []
    kari = 0
    for i in range(N):
    if sali[i] == now:
    kari += 1
    else:
    if kari > 0:
    suu.append(kari)
    kari = 1
    num.append(sali[i])
    now = sali[i]
    suu.append(kari)
    kari = 0
    for i in range(len(suu)):
    if num[i] > suu[i]:
    kari += suu[i]
    elif num[i] < suu[i]:
    kari += suu[i] - num[i]
    print(kari)
    こちらも長い気がしますがacを出すことができました、最初に数列の中にある数の種類とその要素数を別々のリストを使って数えていたのが非効率な気がしますが…公式の解説を見てもよくわからないのでまあこんな感じで良かったのだと思います。

    D問題

    ２次元座標上で、ロボットに渡されるコマンドとゴールの座標が渡されゴールにたどり着けるか答えるという問題でした。
    これは全く解けませんでした、公式の解説をみてもdpとかよくわからない言葉が出てきてるので自分では解けない問題なんだな、と…時間は余ってたので全探索を実装しようとも考えましたがスマホの計算機で簡単に計算したら答えの欄に∞マークが出てしまったので…

    結果

    Dは解けなかったですが全体の順位が134だったのでレートは92上がって635になりました、ついに無色より緑が近くなりました、まだ一度もDを解いたこたがないのでDが解けないと緑はきついのかな…まあhighestスコアを維持できたので自分の中では良かったんじゃないかなと。