Spring Boot with JPA&React&Bootstrap4でWebアプリケーションを作ってみた

進捗どうですか？

新年を迎えてからしばらく経ち、皆様当初の目標からの進捗はいかがでしょうか？

僕は全くダメです。

やりたいこと、やらないといけないなと思ってることは沢山あるんですが、「何をしようかなぁ」と考えているうちに、気づけば寝ていたり、気づけばデレステをやってる毎日です。マキノかわいい。

世の中にはタスク管理の手法は色々ありますが、それらはすべて「タスクをこなす意思がある人向け」であり、僕みたいな意思の弱い人間が、あれとこれをやりたいとリストアップしたところで、そのリストを前にした時点でうんざりしてしまうのは必然です。

リストを前にすると尻込みしてしまう。であれば、目に見えるタスクを一つだけにしてしまえばいい。　導入が長くなりましたが、そんなモチベーションから「タスクを一つ選び出すツール」を作ったお話です。

どんなアプリケーションを作ったか

こちらになります。

https://gachamaker.herokuapp.com

ソースコードはこちら。

github.com

どうせだったら、タスクを選ぶだけじゃなくて、デレステにインスパイアされた感じですがガチャ形式にしちゃおうという目論見です。

って訳で、別にタスク管理ツールとして使わなくてもOKです。

こんな感じで、SSRとして息抜きを入れることができたら、楽しく生産的な日々を過ごせるんじゃ無いかなぁと思ったりした訳です。

技術的な話

サーバー

サーバーは相変わらずherokuを利用しています。久しぶりに管理画面にログインしてみましたが、まだ日本リージョンはまだ無いみたいですね。ちょっとしょんぼりです。

サーバーサイドアーキテクチャ

そして、サーバー側は、僕にしては珍しくJavaを使っています。Spring Bootを試してみたくて。

IntelliJを使ってセットアップしたんですが、ものすごく便利です。

プロジェクト作成時に、必要なライブラリをこんな感じでぽちぽちしていくだけで終了です。Maven Archtypeなんていらなかったんや・・・コレは感動しました。

また、DBアクセスについては、JPA(hibernate)を使ってみました。SQL書かなくて良いのはいいんですが

• OneToMayとManyToOne双方指定しないといけない
• equalsとhashの実装が地味にめんどい(自動でやって欲しい)
• 複数PKに対応しているのは良い（Djangoはできなかったはず）。けど、PKクラスを用意したりと面倒な部分もある
• Entityからテーブル作ってくれるのは良い

と、便利な点と不便な点がある感じで。複雑なSQLとなるようなものを書いてないので正確には評価できませんが、そこが問題無いのであれば仕事でも使っていきたいなぁと僕は思いました。

フロントエンドアーキテクチャ

Reactを使ってみたくて試してみました。

僕が使ったことがあるのがBackbone+Marionetteだけなので比較対象が少ないですが、Backboneよりはコード量少なく、かつ見通しも良いなと思いました。

しかし、当初画面要素の一部だけをReactで作ろうとしたところ、Reactのアーキテクチャ的にそれが許されないことを痛感しました。

Virtual DOMという言葉は有名ですが、言い換えるとReactから触るにはReal DOMではなくVirtual DOM経由でアクセスしないといけない為、一部だけ通常のHTMLでってのがなかなか難しいんですね。

既存にあるアプリケーションを徐々に置き換えて・・・といった使い方はできなさそうだなぁと感じました。

なお、Reactはオフィシャルに日本語のチュートリアルがあるので、まだ触ったことが無い方は一度コレをやってみるのをおすすめします。

僕もここから入って、チュートリアル終わらせて、あとはググりながらこれを作った感じです。

facebook.github.io

あとは、Bootstrapを3ではなく4にしてみたのですが、このレベルであれば使い勝手はあまり3と変わりませんでした。

Componentsのドキュメントが、今まで１ページだったのが種類ごとに分かれて、見た目から「どれつかおうかなー」と悩めなくなったのが辛かったです。

v4-alpha.getbootstrap.com

まとめ

明日朝早いのでがーっと書きましたが、

• Javaはやっぱりちゃちゃっと書くには大変。慣れもあるけどPython(Django)の方が僕はストレスたまらない
• Reactはチュートリル後にいきなりアプリケーション作り始めることが可能なくらいには分かりやすい
• Bootstrap4はまだα版だけど、特に問題には当たらなかった。が、ドキュメントが以前と比べて分かりづらく、やりたいことを見つけるのに一苦労
• SSRが1.5%というのは、やっぱり絶望的

といったあたりでしょうか。

Spring BootもReactも、このアプリケーションを作るにあたって初めて触れた技術です。

みなさんも、何か自分が触ったことの無い新しい技術で、何かを作ってみると楽しめるかもしれません。

補足

ガチャの例はこんな感じです

https://gachamaker.herokuapp.com/deck/0eba6a49-f48b-4e03-a6ad-562c28134161

見ての通り、レイアウトがちょっと崩れてます。これは明日直したいな・・・と思ってる次第です

↑追記：直しました！

SpringにおいてJPAのEntityをRESTのJSON返却値としてそのまま用いる際の注意点

Spring Frameworkを使ってREST APIを作りつつ、その返却値としてJPAのEntityを使いまわそうとしたところエラーに悩まされ。その解決策について、日本語で書かれている情報がなかったので、ここに共有します。

問題が発生する条件

• JPAのEntityを返却値として用いている
• Entityの中でリレーションを定義している

が条件となります。

どのような問題が発生するか

JPAでリレーションを設定する際、親から子へのリレーションだけでなく、子から親へのリレーションも定義する必要があります。

具体的にいうと

/** 親テーブル */
@Entity
@Table(name = "parent")
public class Parent  implements Serializable {

    @Id
    String id;

    String name;

    @OneToMany(mappedBy = "parent",
            cascade = CascadeType.ALL,
            orphanRemoval = true)
    List<Child> children; // 子の定義

  // 略

    @Override
    public String toString() {
        return "Parent{" +
                "id='" + id + '\'' +
                ", name='" + name + '\'' +
                ", children=" + children +
                '}';
    }
}

/** 子テーブル */
@Entity
@Table(name = "child")
@IdClass(ChildPk.class)
public class Child  implements Serializable {

    private static final long serialVersionUID = 1L;

    @Id
    @ManyToOne
    Parent parent; // 親の定義

    @Id
    String childId;

    String name;

  // 略

    @Override
    public String toString() {
        return "Child{" +
                "parent=" + parent.getId() +
                ", childId='" + childId + '\'' +
                ", name='" + name + '\'' +
                '}';
    }
}

といった形になります。

つまり、オブジェクトの形としては、親は子を持ち、子を親を持っているわけで、循環参照の形態をとります。

これを

    @RequestMapping(value = "")
    public Parent create() {
        Parent result = service.getData();
        System.out.println(result);
        return result;
    }

としてParentを戻りとしてcontrollerを呼び出すと、consoleでは

Parent{id='1', name='one', children=[Child{parent=1, childId='a', name='1-a'}]}

と表示されますが、ブラウザ上では先ほどの循環参照の問題にあたり

としてグロ画像的な表示になり

2016-03-20 00:27:34.369 ERROR 18687 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.http.converter.HttpMessageNotWritableException: Could not write content: Infinite recursion (StackOverflowError) (through reference chain: com.example.entity.Parent["children"]->org.hibernate.collection.internal.PersistentBag[0]->com.example.entity.Child["parent"]->com.example.entity.Parent["children"]->org.hibernate.collection.internal.PersistentBag[0]->com.example.entity.Child["parent"]->com.example.entity.Parent["children"]->org.hibernate.collection.internal.PersistentBag[0]->com.example.entity.Child["parent"]->〜略〜com.example.entity.Parent["children"])] with root cause

java.lang.StackOverflowError: null
    at java.lang.ClassLoader.defineClass1(Native Method) ~[na:1.8.0_65]
〜略〜

とStackOverflowErrorを起こしてしまいます。

解決方法

stackoverflow.com

に解決方法がありました。

@JsonIdentityReferenceを指定してあげるだけです。JSONに変換する際に、持っているオブジェクトを展開するのではなく、そのオブジェクトのIDを使うようにしてあげる感じですね。

先ほどの例だとParent parent;に対して

    @Id
    @ManyToOne
    @JsonIdentityInfo(generator = ObjectIdGenerators.PropertyGenerator.class, property = "id") // このアノテーションを追加
    @JsonIdentityReference(alwaysAsId = true) // このアノテーションを追加
    Parent parent;

としてあげることで

とJSONが出来上がりました。説明するまでもないかもしれませんが、@JsonIdentityInfoにて何を当該オブジェクトの識別子として利用するか明示し、@JsonIdentityReferenceにて、参照先展開の代わりに識別子を利用しろと命じている感じです。

なお、@JsonIgnorePropertiesというアノテーションをクラスに指定し

@Entity
@Table(name = "child")
@IdClass(ChildPk.class)
 @JsonIgnoreProperties({"parent"}) // これを有効化することで、parent自体をjsonに含めない指定も可能
public class Child  implements Serializable {
〜略〜
}

として本例でいうところのchildが持つparentをJSONに出力しないことも可能です。

ソースコード

github.com

ということで、日本語でJsonIdentityReferenceとグーグル検索しても出てこなかったので記事にしてみました。

同じ問題に長時間はまる人が１人でも減ることを祈ってます（RESTなアプリケーション作るのに、Javaって選択肢がそもそもあんまり無いのかなぁとも思ったりしますが）

プログラムを書けるようになるとどんなことができるか python編

WebアプリケーションのプログラムをJavaで書いてたんですが、ちょっと疲れてきたのでこんなエントリー

世の中便利になったもので、いろいろなプログラムの学習記事が溢れてます。

が、学び始めはどうしてもしょうがないんですが

• 足し算のしかたを学びましょう
• ループしてみましょう
• 分岐してみましょう
• とかとか・・・

というのが続いて「僕はプログラムの文法を学びたいんじゃなくて、凄いことができる魔法のツールの使い方を学びたいんだけど・・・」と気が滅入ってと思います（数学みたいで楽しい！と思えたあなたは、正解というかプログラムを楽しむ素質があるのでそのまま楽しみましょう！）。

コンソール画面に表示するプログラムでどんなことができる？

プログラムを学び始めて最初は、いわゆるコンソール画面（windowsならDOSプロンプト、Macならターミナル）に何かを表示するプログラムを書いていることでしょう。

実用的というか、使えるプログラムかと言われると・・・・きっとちょっと微妙ですね

で、ここで僕が先ほど息抜きに描いた「コンソールに表示するプログラム」を見てみましょう。

import numpy.random as rd

# http://trendy.nikkeibp.co.jp/article/pickup/20140904/1059848/?SS=expand-life&FD=993747041
# から抜粋した2014年度のブラジャーカップ分布
oppai_ratio = {
    "A": 0.056,
    "B": 0.208,
    "C": 0.265,
    "D": 0.242,
    "E": 0.160,
    "F": 0.056,
    "Over H": 0.013
}

def oppai():
    return list(oppai_ratio.keys())[rd.choice(len(oppai_ratio), p=list(oppai_ratio.values()))]

print(oppai())

何かと言いますと、ブラジャーのカップサイズの分布にしたがって、カップサイズを返してくれるプログラムです！

試しに実行してみましょう

Dカップと返って来ました！街で女性と出会ったとしたらDカップだったみたいなものですね。

ここで、

print(oppai())

を

for x in range(15):
    print(oppai())

とでもしてみましょう（１５回表示を繰り返した）。

すると結果は・・・・

15人の女性と出会ったとすると、AカップとEカップはチラチラとお目にかかれる感じですね。FやOver Hは出てきません。希少価値といえば小さいイメージでしたが、やはり大きい方が稀少だったんや・・・

何が言いたいかというと

割とコンソールで表示するプログラムでも、楽しめるもの、実用的なものというのは作ろうと思えば作れちゃいます。

先ほどのを応用すれば、簡単にソシャゲのガチャシミュレーターを作れちゃいますよね。

ちなみに僕が始めて作った実用的なプログラムは、パスワード解析ツールでした。a-zを繰り返して桁数増やしていきパスワード解除を試行といった感じで（念のためですが、ネット上の何かに対してはやめましょうね。不正アクセスなんとか法で最悪捕まります）

ということで、勉強しながらでも、「今の知識でどんなものが作れるかなー」と妄想しながら勉強をしていってもらえればと思いますし、良いのが思いついたら実際に作ってみてもらいたいなーと思う次第であります

「ヒエログリフを書こう！」という本がめちゃくちゃ面白かったので紹介したい

翔泳社の本がKindleでセール中ということで、色々買い漁ったのですが、その中でダントツに面白かったというか、今年買ってよかった本暫定第一位な感じなので紹介してみたいと思います。

ヒエログリフを書こう!

先に感想を短く述べると

「面白い」と言ってますが、本当に面白いです。

勉強になるとかためになるとか、ヒエログリフが読めるようになったとか、言語学を学べたとか、そういう読み方ができる人もいるかもしれませんが、僕は純粋に面白かったです。

「あ、知的好奇心が満たされるっていう感覚って久しぶりだなぁ」と、プログラマらしからぬ感想です。

カジュアルに読めて、読んでて疲れてこないというのも好印象です。

のっけから面白い

技術書を読むときにありがちなんですが、序盤で難しい言葉に辟易して読み進めることを嫌になるということが僕はよくあります。

しかしこの本はどうでしょう。「あ、肩の力抜いて読んでいいんだ」と安心させてくれます。

気楽に読んでね。ちょっとでも興味を持ってくれたら嬉しいな。楽しいと思ってくれたら嬉しいな。

そんな思いが伝わって来る序文です。

学術書としてというよりは、ひとつの読み物として気楽に読み進めていくことができます。

文字そのものが楽しい

文章ではなく、文字そのものに物語を感じれるというのは純粋に楽しいです。説明があるものについてはなるほどーと感心するものばかり。

ここでは異国人または敵をあらわす文字ですが、人の絵にヒゲがついていたらどうなるかとか、筆記具をあらわす文字がパレットと葦の筆とインクの組み合わせだとか、文字そのもの、その絵の意味というか込められた思いが楽しいです。

短い解説であっても、「あ、それ葦だったん・・・？」とか「よく考古学者はその鳥がハゲワシだと理解できたなw」と面白い。ツノヨコバイクサリヘビとか、どんだけ生活の中で見かけるものだったのか知りませんが、種としての蛇じゃだめだったの！？とツッコミ入れながら読むと面白いです。

ちゃんと文法の勉強にもなって面白い

まさかヒエログリフが解読できるようになってやろうとは思いませんが、目にした際に学んだからこそわかることがあればほくそ笑むことができるでしょう。

例えば文字は上下左右どこから読めばいいのか。僕はこの本を読むまで知りませんでした。

例えば人の名前はどういう風にあらわすのか。僕はこの本を読むまで知りませんでした。

その他、決定詞というもの（単語の最後にスズメが出てくると「不吉な」とか「悪い」とかいったネガティブな意味になる！スズメ可愛いのに！）、数字の表し方と◯個・◯人といった表し方、などなどといった、ちょっとした豆知識としてつかえるものが満載で面白いです。

解読の歴史が面白い

世界史でロゼッタストーンが出てくるのは中学時代か高校時代か忘れましたが、学校でやったと記憶しています。また、大英博物館でも本物を見てレプリカに触れたことを覚えてます。

僕の中にある本を読む前の知識では「ヒエログリフなかなか解読できなかったけどロゼッタストーンに他の言語と合わせて同一文章の記載があったから解読できるようになった」といったあっさりしたものでした。

最初にヒエログリフという言語を学んだ後だと理解出来る歴史が面白い。例えば上の引用で

残念なことに、ヤングは早急に次のような結論に飛びつきます。象形文字のいくつかは「表音文字」だが、外国語の名称など、古代エジプト語では簡単に表記できない特殊な単語のみに使われている。

となっている部分については、実際にヒエログリフ（古代エジプト語）を学んで初めてなるほどなーと思える部分でしょう。

こういった歴史的なお話も大変面白いですし、何より前に学んだ（といっても流し読みレベルでOKな）もので次の章の理解が進むというのは、知的好奇心が満たされるという言葉そのものです。面白い。

実際のヒエログリフが面白い

言われてみればそうなんですが、こういうやつもヒエログリフなんですよね。

僕は最初石板に掘られたような、質素な無色の文字を想定して読んでました。だから、なんで本に色ついてるのかな・・・？と思ってましたがこれらを見て納得です。

あ、こういうやつもヒエログリフだったのね・・・と。

そしてこれを見て、「あ、ここ名前だ！」とか「内容わからんけどこういう順序で読むんだねー」とか色々気づきがあって面白いです。

僕がエジプトに旅行行くかと言われたらまぁまず無いでしょうが、こういったヒエログリフに焦点を置いた観光ガイドというのも面白いです。

欲しくなってきません？

Amazonのレビューも高評価なものばかりです。

そして僕も勢いでブログ書いちゃうくらいに買ってよかったなぁと思えた本です。

何よりKindle版ならいまなら半額！

僕はKindle版で買いましたが、書籍の本も買おうと思ってます。ぜひ本棚の一員に加えたい（友人がぽちったので、一応中身見させてもらってから）。

そんな感じで、オススメ本の紹介でした！

出典

ヒエログリフを書こう!

出版社: 翔泳社 (2000/5/31)

ISBN-10: 488135888X

監修：吉村 作治

原著：フィリップ アーダ

翻訳：林 啓恵

デザインから逃げていたエンジニアがWebサイトを作ってみた

タイトルの通りWebサイトを作ってみたというお話です。

先にできたもの（まだ中身は作成途中ですが）を出しておくとこんなのになります。

Britannia -Ultima Online Fun Site-

前回の記事で、ウルティマオンラインなるゲームをやってみた話をしましたが、これがまた面白くて。

起動して満足して終わろうと思いましたが、のめり込まないように注意しつつ、ちょくちょくあれからも楽しんでおります。（今もゲームの中で釣りをしながらこの記事を書いています）

nakazye.hatenablog.com

で、大変楽しく遊んでいるんですが、前回の記事の記事のブコメやTwitterの反響で

• 昔は楽しかった（今は楽しくないはず）
• やってみたかった（今やろうとは思わない）

といったコメントを散見しまして。（一番スターついてたブコメにあったオーバーロードは見ました！２期欲しいですね。）
今最高に楽しく遊べている僕としては、ちょっともったいないな、と思いました。

僕も昔は良かったという思いの強い懐古厨ですが、さすがは18年も続いてるゲームだけあって、その間にできることは増え、かつバランスも良い感じに調整されています。

で、ここから本題に入るわけですが、この楽しさをシェアできないかなと。

最近Web周りの勉強ではJavaScript界隈の流れの速さについていくのに心が折れ、CSSを勉強したいなと思っていたことも手伝い、Webサイトを作れば良いじゃない！という発想に至ったわけです。

いままでのぼく

「いわゆるBootstrapを使わないと何も出来ない子」でした。

コードを書くのは楽しくて好きなんですが、デザインとなると微妙なものしか作れずできればやりたく無いカテゴリーに分類されます。

そういった時、Bootstrap使うと適当にやってもそれっぽく作れるので重宝していたというか、コレを使わないと何も出来ない子になっていました。

今回のWeb制作のルール

そんな訳で、一念発起してWebサイトを作っていきます。

• ブログサービスは用いない（デザインに制約を受けるので）
• normalize.css以外のcssライブラリは用いない
• いきなりコードを書き始めるのではなく、デザインを事前に考える

です。

ブログサービスは用いない

デザインにシステム上の制約を持ち込みたくなかったので、ブログ形式は採択しないことにします。

ただし、すべてHTMLを手打ちするというのも辛いので、今回はSphinxと呼ばれるHTMLジェネレーターを使ってコンテンツを作成していきます。Wordpressも考えたんですが、ほとんどアクセスが無いであろうページ用にサーバーを用意するというのも気が引けまして、静的サイトにすることに決めました。なお、公開にはGithub Pagesを利用しています。

Sphinxについては後ほど詳細を紹介します。

normalize.css以外のcssライブラリは用いない

CSSを学ぶのが主題なので、CSS ライブラリは用いません。しかし、例外としてブラウザがデフォルトで持っている余計なスタイル設定をそぎ落とすnormalize.cssだけは利用します。

いきなりコードを書き始めるのではなく、デザインを事前に考える

どうせなので、デザインを考えてHTMLに落とすまでの過程も一般的な流れに沿おうと思いました。

具体的には、ワイヤーフレームを作ってカンプを作り、HTMLに落とす流れです。

内容とサイトマップを決める

まずは、どの様な内容・サイトマップにするか決めないことには、メニューのデザインが決まらないのはもちろんのこと、全体的なデザインも作ることができません。SIで言うところの要件定義みたいなものですね。

僕はこの作業として、マインドマップを使ってみました。

上はただの備忘メモで、下がサイトマップになっています。

ちなみに僕はマインドマップ作成に以下のツールを使ってます。

MindNode 2 – Delightful Mind Mapping

• IdeasOnCanvas GmbH
• 仕事効率化
• ¥3,600
• 

ワイヤーフレームを作成する

決めたサイトマップを元に、どの様なレイアウトにするか考えます。

ワイヤーフレームを作成するにあたって、どんなソフトを使うのが良いかネットで色々と検索してみたところ、「昔はPhotoshopを用いるのが多かったが、最近はSketchというソフトを用いることも増えてきている」とのことだったので、素直にSketchを購入しました。

Sketch - Professional Digital Design for Mac

で、できたワイヤーフレームがこちらです

Sketchの操作方法を説明しているサイトを探し回ったのですが良いのが見つけられず、諦めて作り始めたらあっさりそれっぽいものができちゃいました。Sketchすごい。

デザインを載せる（カンプ作成）

先ほど作ったワイヤーフレームを元に、画像を載せたり内容をそれっぽくしていきます。

ぐっとそれっぽくなりましたね。実際の制作現場であれば、ここで「なんか違う」となればワイヤフレームから作り直しになるのでしょう。恐ろしい。

デザインセンスの無い僕からしたら、割と改心のできと思えたので、今回はこのまま突き進むことにします。

HTML作成

先ほど説明した通り、今回はSphinxというツールを使ってHTMLを吐き出します。

Sphinxにはテンプレート機能があるので、まずテンプレートを用意します。

上記は

テンプレートを作成する — Python製ドキュメンテーションビルダー、Sphinxの日本ユーザ会

に従ってテンプレートを作った直後の画像です。

こちらに対して、まずはnormalize.cssを適用します。すると以下のような感じに

思ったより変わりませんね。

この状態でテンプレートファイルのHTMLをガツガツといじっていきます。

で、出来上がったのが以下の内容です。

Britannia -Ultima Online Fun Site-

レイアウト作っていく上でハマったポイント

色々あるのですが箇条書きで

同じOSでもブラウザによってフォントのレンダリングが変わる

作成中はずっとFirefoxで確認していたのですが、ある程度作ったタイミングでSafariで開くとその文字の太さにびっくり。明朝体で作っていたので視認性が高くなるというよりは野暮ったくなる方が強くて。

こちらは

-webkit-font-smoothing: antialiased;

というオプションを入れることでSafariでも見れる感じになりました。

SVGは文字データも持てる

当たり前といえば当たり前なんですが、SVG画像は文字データも保持できます。

Sketchで画像をSVGに切り出した際は、フォントをアウトライン化していなければ文字データとして保存され、例えばMacで作ってWindowsで表示するなどすると対応するフォントが無いせいで意図しないフォントで表示されてしまいます。

SVGで書き出す前はフォントをアウトライン化しましょう

Safariでtext-shadow 1pxは汚く表示される

text-shadow: 1px 1px 1px #000000;

みたいな設定をSafariで表示したら、ドロップシャドウ部がギザギザでものすごく汚い。2pxにしたところ綺麗に表示されたという問題がありました。

BOX要素を横に並べるのをやめるにはclear: left

これは僕が無知だっただけですが、自前で作ったグリッドシステムを、12分割すべて埋まってない状態で改行する方法がわからず苦労しました。

結論で言うと、rowクラスに

clear: left;

と追加すると、綺麗に次の行に送られました。

参考：Sphinxについて

sphinx-users.jp

Pythonで作られたドキュメントビルダーになります。今回はHTMLを作成するのに用いてますが、PDFを作成したりEPUBを作成するのにも使える便利ツールです。

reSTと呼ばれるMarkdownの様なフォーマットのテキストを解釈して、指定の形式に変換してくれるツールです。

markdownと比べて変換前の状態が見易い（しかしその分タイプ数が多くなる）のと、独自に拡張を追加できるのが特徴です。

今回のサイト作成でも、独自にメタ情報を持てる様にして、その情報を元にトップページへの新着記事展開や、各種カテゴリー記事へのサムネイル展開を行っています。

なお、現在のソースは以下に配置されています。

github.com

まとめ

今までデザインから逃げていただけあって、割と辛い作業でした。

しかし、一歩一歩手順を踏んでいけば、初めてなりにもそれっぽくできることがわかりました。

サイトマップ作成→ワイヤーフレーム作成→カンプ作成→コーディング

実際のWeb制作現場で取られているフローだと信じていますが、趣味サイトを作る上でも十分有用なんだなと思いました。

こういったフロー知らない状態で、いきなりデザインに気を使ったWebサイトを作れと言われても、何から手をつけていいか困ってしまったと思うので。

まだまだ野暮ったい部分が多いので、もっと色々作って実際に手を動かして、ゆっくりとでもデザインへの拒否反応が消えていけばなと思ってます。

おまけ

ホント今でもウルティマオンライン十分楽しいので、少しでも気になった方は是非無料トライアル試してみてください！

昔やってたという方も、色々と変わった点が多く新たな気持ちで楽しめると思うので是非是非！（ちなみに土地たくさん空いてるので、大きな家が比較的簡単に立ちます！）

最後に再度作ったもの（作ってるもの）へのリンク：　Britannia -Ultima Online Fun Site-

UO(ウルティマオンライン)というゲームがあったことを君は覚えているだろうか

「今日学んだこと」というタイトルのブログですが、この投稿には学びは無く、ただの僕の日記であり、本来はチラシの裏に書くべきことなんだろうけど、寂しさを共有したくてブログに綴ってみることにします

ソードアートオンラインなるアニメを見たのです

前回の記事で僕がフィジカルに故障中なことを書きましたが、まだ運動ができない状態が続いてたりします。

で、Netflixで何かダラダラ見ようかと選んだアニメの一つがソードアートオンラインだったりします。

内容はというと、リアリティのあるネットゲームの中で主人公と女の子がきゃっきゃうふふするお話　とか書くとファンに殴られてしまうのでしょうか。普通に面白くて一気に見てしまったので、昔ネットゲームにハマったことがある人は見てみると楽しいかもしれません。

ぼくのねっとげーむへんれき

記憶がちょっと曖昧なんだけど、RO（ラグナロクオンライン）を先にやってて、その後でというか並行してUO（ウルティマオンライン）を始めた気がする

2000年の前半から中盤、僕はまだ大学生で。UOの課金資金を得ることが、辛いバイトを続けられたモチベーションの一つだったような気もします。

その後も色々なネットゲームをやった気がする。が、どちらかというと当時付き合ってたゲーマーな彼女に合わせるというか、その子との時間を少しでも共有したいが為に遊んでいただけであって、ハマると呼べるほど遊んだのはROとUOだけだった。

ウルティマオンライン

UOを遊んだことが無い人向けに説明するには、Googleで画像検索をしてもらうのが良いかもしれない。

そこには最近のゲームのような洗練されたグラフィックではなく、いかにも古くさい洋ゲー感あふれる画像で埋め尽くされると思う。世界中の人間が、この血生臭そうなグラフィックのキャラクターに扮して血生臭い世界観の中、ネットワーク越しの顔も知らない人と遊ぶのである。

この世界の中で、主にモンスターと戦い、談笑し、時に服や武器や防具を作り、時には釣りをしたり、料理をしたりしていた。 ギルドと呼ばれるパーティーシステムがあり、僕もそんな仲間達と、時にはモンスターと戦い、時にはマフィンを焼いてパーティーをしたりしていた。

ソードアートオンラインの様な洗練されたグラフィックとはかけ離れているが、そこで過ごした時間は僕の中に確かに思い出として残っているのである。そして僕と同様に、そこで過ごして熱中していた人が万人単位でいたのである。

UOの世界におかえりなさい

そんな思い出をもやーと思い出しつつ、何気なしに「ウルティマオンライン」で検索すると、公式サイトの中でこんなページを見つけた

一番下に「以前使っていたアカウントを再開する」とある。

10年である。僕が最後にログインしてから、10年経ってるはずである。再開なんてされる訳が無い。あの頃の僕はブラウン管のモニタを使っていた。HDDの容量も20Gあったかどうかだったと思う。 サーバーだって、今の様に大量のデータを保持できなかったはずである。

アカウントが残ってる訳がない

そう思ったが、なぜか鼓動が早くなり、やるだけやってみようと試したところ、何の滞りもなく再アクティベートされた。

僕は、もうあのころの大学生ではない。1,554円を戸惑うことなく課金できる大人になっていた。

ただいま

起動すると、見慣れない画面が現れる。Publish91と書いてある。これはアップデート91回目を意味する。

僕が辞めた時の数字は覚えていないが、離れるきっかけの一つになったアップデートが16だったので、心が離れてからも75回のアップデートが行われてたことになる。

パッチが無事当たると、見慣れた画面。当時遊んでいた人は、この画面を見て胸がこみ上げてくる人もいるのではないだろうか。

はやる気持ちを抑えてログインすると、こんな画面になる。あの時のまま。あの時と変わらぬまま、糞ダサいキャラクターが現れた。

当初、ここには僕の家があった。貴重なアイテムもそこにあった。

UOでは、家を建てられる場所が限られている。その為、課金をやめてしばらくすると、他の人が家を建てれる様、無くなってしまうのである。当時は「家が腐る」と表現していた気がする。

おかえりと言ってくれる人はいない

捜査方法を思い出そうと試行錯誤しているうちに、こんな画面になった。ギルド（パーティー）メンバー一覧である。

メンバーの最終ログイン日が見れる。最終ログイン日が近いのは、同じユーザーの別キャラクター（UOは5人までキャラクターを持てる）だからだろう。

一番最後にログインした人でも3年前。3年間、ギルドの看板は、誰に見られることもなく、ただしそこにあり続けたのである。

これは、当時のmixiのやり取りである。GHはギルドハウスの略で、その名の通りギルドの家で、集会所で、憩いの場だった。

そしてその場所は当然、空き地になっていた。

アニメの世界と、現実の世界

先に紹介したアニメは小説でお話が続いてる様で、どんな終わり方にせよみんな仲良くハッピーエンドを迎え、きっとゲームで遊び続けるだろうと思う。

現実で10年経った僕はどうなんだろうか。

ゲームはまだ続いていた。ただそこに親しかった人はいない。

10年前の僕は、アニメの様な生死をかけた戦いはしてなかった訳だけど、同じ様にゲームの中で楽しく過ごし、リアルでも遊んだりした。

東京に住んでるメンバーの家に遊びに行ったり、東京に住んでるメンバー達と大阪に住んでるメンバーのところまで遊びに行ったりもした。今の様にケータイで簡単に写真が撮れる時代じゃなかったから、ほとんど写真は残ってないけど少しだけ残ってる。

mixiで繋がって、お互いの近況を報告しあったりもしていた。あなたがmixiにアクセスしなくなったのは、いつからだろう？多分、同じ様な時期にみんなアクセスしなくなり、僕もしなくなった。アカウントがなくなってるユーザーも多い。

もう、連絡がとれる人はいない。

10年という歳月

みんながゲームが辞めた理由。飽きたという単純な話だったり、結婚したり、子供ができたり、仕事や生活が変わったり、そんな理由もギルド内では少なくなかった。僕も就職＆仕事が忙しくなったというのが一つのきっかけだった。

それからみんなどうしているだろうか。

今となっては知る術も無いが、少なくとも当時仲が良かった連中はみんな結婚し、子供を作っている。みんなパパやママだ。
今更「おーいみんな久しぶりにゲームやろうぜ！」と無邪気に言っても多分「そう言ってもねー」と言われてしまうだろう。誘う術なんて無いんだけど。

それからぼくはどうしているだろうか。

仕事は転職して給料は上がったが、円形脱毛症が発症するレベルで忙しくなり疲弊する毎日。最近はちょっと楽になってきたけど。
当時割と長く付き合ってた子とは同棲始めて、数ヶ月で相手が出て行くことになり、この夏やっとその家から引っ越した。

何か変わったかと言われても、ゲームの中のキャラと同様、根本的には殆ど変わって無いのだ。

UO懐かしいなーと、あの頃に戻った様に、あの頃の様に（きっとユーザーが少ないだろうから、居心地の良いギルド見つけて仲間に入れてもらうとかはできないだろうけど）ゲームに没頭してみようかとちょっと思った。

体を壊し、仕事もこのまま続けられるのかという恐怖に怯え、何より将来僕はどうなるんだろうという恐怖に怯えて。今は仕事休んでて時間が有り余ってたから、近年稀に見るネガティブ感情がうずめいてたこともあり、現実逃避をしたかったのだ。

あの頃から僕は基本的に変わってない。パソコンを起動しUOで現実逃避していたのがXBOXになり、最近だとwii uでイカと戯れて現実逃避しているだけだ。

久しぶりにUOの自分のキャラに再会して、「お前もそろそろ変わるべきなんじゃん？変わらないのは俺だけで十分だよ」と言われてる気がした。

オチは無い

最初に「この投稿には学びは無く、ただの僕の日記であり、本来はチラシの裏に書くべきことなんだろうけど、寂しさを共有したくてブログに綴ってみることにします」と言った通り、オチは無い。ただ、なんというかこの寂しさを共感してくれる人がいたら嬉しいな、とは思ってる。

仕事を始めてから特に、「若い時に楽しく過ごした思い出は生きる糧であり、それを思い出して噛み締めてつらい今を耐えていくんだ」と思うことが多くなり、そうやって過ごしてきた。その「楽しく過ごした思い出」は主にリアルのことなんだけど、今日久しぶりにUOにログインして、ゲームに熱中してたその時のいろんな思い出がぶわーっとフラッシュバックして。

この投稿がどれだけの人に読まれるかわからないけど、読んでくれている人にどれだけ同じ様な思い出がある人がいるだろうか。ゲームじゃなくてもいい、学生時代の仲間達の思い出とか無いだろうか。

その中でも、「周りがいろいろ変わっていくなか、僕/私は何が変わっただろうか」という人がもしいたら、多分そうやってもがいている人は他にもいて、少なくとも僕がそうであるし、そんな中で成長していくんだと思う。僕が言っても説得力は無いんだけど。

そして僕は、またゲームに逃避するという選択肢をやめたところで、じゃぁどうするべきなんだろうか。

やるべきこと、やりたいことはたくさんある。

そういう現実に向き合って、戦っていくしか無いんだろうなぁと思ってる。

こういうやる気みたいなものって、大抵寝て起きると忘れがちなんだけど、こうやって文章にもしたし、文章にするようなインパクトもあったので、持続することを祈ってる。

今日のうちに何か一歩踏み出そうと、喧嘩状態になっていて、数週間ほど連絡の無い子に「起きてる？」とメールしてみた。返事はまだないけど。

ゲームの世界は終わっても、これからも続く現実をより自分が楽しい/幸せだと思える様な努力を続けていきたいな　と今はただただ思ってます。

最後に蛇足

あの時一緒に遊んだメンバーがこの文章を目に留める機会があって「おいお前○○じゃないか！久しぶりだなー！最近どうよ！」とか連絡があったら楽しいだろうなぁと思うけど、無いだろうなぁ・・・

健康になろうと自転車通勤を始めたら、逆に不健康になった話

結論から先に書くと、横紋筋融解症なる病気になりました

自転車を買ったのです！

少し前に引っ越したんですが、その理由が「駅前に住んでると、夜中まで酔っ払いがうるせえ！」だったので、できるだけ駅から遠いところに引っ越したんですよ。

で、引っ越したのが都内なのに駅まで4キロくらいかかるという超絶立地な場所。静寂を求めて引っ越したのにお隣のギシアンが毎晩聞こえてくる環境だったのは誤算でしたが（窓閉めれば聞こえないのが救い）。

そんな環境なので自転車が必要となり、毎日使うものなら少しは良いものをと購入したのが写真のクロスバイクです。
予算諸々込みで8万円でと自転車屋で伝え、オススメしてもらったこちらのTREK FX 7.2が我が愛車となりました。

お高いチャリすごい！

僕からしたら相当お高いチャリですが、この業界（？）の中ではエントリーモデル。だけど僕はそんなこと知りません。今まで乗ってきた自転車との違いに驚きました。坂道が楽！漕ぎ出しスムーズ！ペダル止めてもスピード落ちない！

そんな感じで駅まで片道4キロの通勤を楽しんでたんですが、ある日ふと思いました。

オフィスまでもチャリで行けるんじゃね？？

そう思ったとある夏の日。Googleマップで調べてみると片道21キロ。「20キロ　自転車　時間」で検索してみると、1時間くらいが目安っぽい。アレ？電車で行くより早いじゃん？

さっそくAmazonで必要なグッズを買い揃え試してみました。

MINOURA(ミノウラ) スマートフォンホルダー [iH-400 STD] スタンダードサイズ 22.2mm/25.4mm/28.6mm

↑今の所落下どころか落としかけたことすらありません。オススメ

骨伝導ヘッドホン耳フリーAS400(AfterShokz)

↑上で紹介したスマホホルダーと併用すると、iPhoneの場合若干干渉しますが使えます。
　なれない道走るにあたってスマホナビ見るのに視線を下げるというのを極力減らしたかったので、 　耳を一切塞がない骨伝導イヤホン導入してナビ音声拾うのに使いました

[ティンバック2] TIMBUK2 バッグ Classic Messenger S クラシックメッセンジャー 116-2-2000 Black (Black)

↑チャリ用に買ったバッグ。ベルト調整が激しく便利。レビューの評価高いのも納得

↑あとはこのナビアプリを購入しました。

その他、自転車購入時に一緒に買った、チャリ用グローブとズボンの裾巻き込み防止バンド、もちろん帰り道に備えてライトも準備し、いざ出発です。

実際走ってみると

夏のとある日の朝６時。どんな不測の事態があるかわからなかったのと、涼しい時間にチャレンジしたかったのでこんな時間に出発しました。服装はチノパンとポロシャツ。

この時はまだ車道を走るのに慣れておらず、ビクビクしながら走ってたのを思い出す。こんな時間でも意外とチャリで走ってる人はいて、「あ、こんな感じで走れば良いんだ」と参考にしながら道路の端っこ走ってました。

途中、代々木公園の坂道と六本木ヒルズあたりの坂に死にそうになりながらも、また途中道に迷いながらも（乃木坂のトンネルに脇道あると信じたら階段で絶望した記憶が）1時間15分くらいで到着。しかもそこまで疲れてない。

アレ？初心者なのに楽勝だったぞ？

この時油断せず、もうちょっと気を引き締めておくべきでした。

俺氏、チャリ通が日常になる

といってもそれからずっとチャリ通し続けてた訳でもなく、梅雨に苛まされたり、ノートパソコン持ちはこばなきゃならなかったりで（万が一コケて壊したらと考えるとチャリ通は無理）、だいたい週１〜２回くらいで続けてました。

コンスタントに1時間5分くらいで到着してたので、1時間切りたいなぁと割と速度も意識してました。これも後の地獄の原因の一つ。

先月のこと

出張が重なり、１ヶ月くらいあまりコンスタントにチャリ乗れてなかったんですね。で、戻ってきたところ天気良い日が続いたり、気温も涼しくなったしとで今まで以上にチャリ通の頻度を増やした訳です。

週3〜週4くらい乗ってた気がします。調子が良い時に限って後半信号に足止めくらって1時間切ることはありませんでした。代田橋の踏切はマジ許さん

で、先々週くらいから、足のモモにつった様な痛みが突如発生する様になりました。

病院に行ってみた

筋肉痛かなと思いつつ午後休みとって木曜に病院に行ったところ、問診だけで筋肉痛と断定され、ロキソニン貰って終わり。ちなみにロキソニンは、痛みは体からのシグナルだろうから限界まで素直に受け止めよう（特に、膝を伸ばしていれば痛まないというのがあったので）と、処方されましたが飲みませんでした。

そこからが地獄の始まりです。金土日と日を追うごとに痛みの大きさ、痛む頻度が大きくなっていく。

足がつったときのMAXの痛みが15分とか続く。歩いてる時に両足に痛みが来た時は、本気で救急車呼ぼうかと思いました。家まで５メートルの距離だったので思い留まりましたが、30分くらい動けませんでした。一瞬で口の中がカラカラになるというのも、これが初めてな経験な気がします。

で、会社に休む旨伝えて月曜日に再度病院に行き、再度診てもらうことに。血液検査をした結果がこちらです。

注目してほしいのがCK（CPK）なる値。

クレアチンキナーゼ - Wikipedia

230超えたら異常値とされているところが、35000と桁二つ飛び抜けてます。その他諸々もひどい値。

で、最初にお伝えした通り、横紋筋融解症と診断されました。

横紋筋融解症

横紋筋融解症 - Wikipedia

これの怖いところは、筋肉を酷使したりぶつけたりして壊れましたで終わらず、腎臓に影響を与えるところ。僕の場合は透析一歩手前と言われ、診断後は２日に１度血液検査して透析要不要を判断してる日々です。１週間経った今も続いてます。

数値の異常だけで済んでくれれば良いんですが、前述の通り痛みもハンパないです。まず、足を曲げるとスイッチが入った様につったような痛みが来る。１５分くらい続く。

足を曲げることができないので、湯船に浸かることができない。（ホント辛い）

トイレに行くのが恐怖でしかない。（和式だったら入院するしかなかったと思う）

階段を上り下りできない。（特に下りは３段も歩こうものならしばらく動けなくなる）

ベッドで横になってる以外の選択肢はありません。スマホ版ドラクエ4買って6章含めてクリアしましたが楽しめたどころかただただ辛かった。

今は負荷かけなければ曲げるくらいはできるという状態にやっとなってきて、こうしてブログ書いてみたりしてる感じです。

知ってほしいこと（この記事で伝えたいこと）

横紋筋融解症という症状を頭の片隅に置いておいてください

特に自転車に乗る人は、こういう病気（病気というか酷使した結果ですが）があることを知って下さい。

筋肉痛とはちょっと違った痛みがあるぞ？とか、変な痛みが続くな という時は、できれば病院に行ってみて欲しいです。放置してると要透析になる可能性があります。

また、病院によるかもしれませんが、僕の場合は整形外科では判断がつかず、内科の判断により症状が判明しました。「自転車やってて足に痛みがある」だけだと、状況判断で筋肉痛と診断されかねません（というかされました）。そんな時は「いつもと違うんで横紋筋融解症が不安です。血液検査できませんか？」と聞いてみても良いかもしれません。

いきなりスポーツマンにはなれない

敗因の一つに、普段運動しないくせに、「疲れも筋肉痛も無いしイケるやん」と思ってしまったところがあります。

自転車は、（初心者が）普通に乗ってる分には激しく筋肉を使うものでは無いと思ってます。少なくとも僕はそうでした。分かりやすいアラートが上がる様な筋肉の酷使の仕方はしません。

ただし、使ってない筋肉を使えば、当然消耗します。そのことを頭の片隅に置いて、「分かりやすく疲れ出てないけど、蓄積してないか？」と考えながら、徐々に慣れていってもらえればかなと思ってます。

特に、僕の様に初めてまもないのにタイムアタックしてみたり、坂道を全力で登ってみたりなどは注意しましょう。

準備は万全に

先に挙げた準備リスト。必要なものが2つ抜けてます。

• ヘルメット
• ドリンク

です。ヘルメットはわかりやすいんですが、今回においてはドリンクが重要です。１時間の距離という事もあり、無水分補給で片道走りきることも多かったんです。

横紋筋融解症の原因の一つに脱水があります。僕の場合、確実に原因の一つだと思ってます。

面倒くさがらずに、できるだけこまめに水分補給してください。じゃないと、僕の様に２週間地獄の痛みに苛まされることになります。

最後に

いろいろ書きましたが、特別気をつけなければならない点は無いんですね。いわゆる常識的な部分だったりします。

その常識的な部分をおろそかにすると、こんなことになる場合もある。

ということで、何事も、無理をせず、無茶をせず、その界隈のルールを遵守して楽しむべきなんだな、ということを身を持って体感した今日この頃でした