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

今日学んだこと

読書感想文とか、勉強した内容とか

Macに貼る為のステッカーを買ってみた

表題の通り、ステッカー買ったぜー!というお話です。

エンジニア向けの勉強会に行くとMac率が高い

そして、みんなステッカーをペタペタ貼っている。githubのoctocatが貼られている確率がその中でも高い気がする。

f:id:nakazye:20160324225133p:plain

↑こういうやつ

昔スケボーやってたんですが、スケボーでも似た様にステッカー貼る文化があるんですね。同じノリで、お洒落的な意味合いでみんな貼ってるのかと思ってました。

f:id:nakazye:20160324225638p:plain

Mac(MacBook Air)を持ってはいるんですが、なんとなく気恥ずかしくて、今までステッカーは貼らずにいました。ただ、最近たまに勉強会に参戦する様になり、お洒落的な意味合いとは別の意味があることに気づきました・・・

何かというと、Mac率が高いので、ステッカーでも貼っておかないと自分のPCがぱっと見どれかわからなくなるという問題が出てくるのです!

ということで、ステッカーを検討し始めました。

ステッカーはどこで入手できる?

先ほど紹介した、皆が貼っているoctocatのステッカーはGithub Shopなるところから買えるそうです。

ここで購入してみようかなーと考えたのですが、githubのcommit数が少ない状況でステッカー貼るのもな…と尻込みし、見送りました。

github.myshopify.com

で、ここからが本題ですが、各種OSSのステッカーを取り扱っているサイトを見つけました。

www.unixstickers.com

このサイトというかショップの素晴らしいのはステッカーを買うと、当該プロジェクトに対して売り上げの一部が寄付されます。

www.unixstickers.com

その他、例えばVimのステッカーを買うと、売り上げの一部がウガンダに寄付されています。先月だと

VIM (ICCF Holland) $61.12

となってますね。なお、我らがEmacsFSFへの寄付となりますが

GNU (Free Software Foundation) $24.43

となってます・・・FSFへ貢献したい方は、以下のサイト経由がオススメです。しかし、送料がかなり高めとなっているので、何か購入する場合は有志を募った共同購入がオススメです(Emacsマグカップを買おうとしたら、マグカップ本体より送料高くてびっくりした)

Support free software | FSF Shop

さっそく買ってみた

オーダーをしたのが今月の3日。で、本日24日に到着しました。

Non trackable via global mail $4.50 という送料が一番安いプランを使って、20日ほどかかった計算ですね。4.5ドルの送料で済んでるんだから良しです。

f:id:nakazye:20160324232908j:plain

こんな感じの封筒で、ポストに届いてました。宅急便ではないので受け取りサインもいらず、一人暮らしな社会人には嬉しいですね。

で、中をあけると・・・

f:id:nakazye:20160324233124j:plain

ステッカーが出てきました!当たり前ですがw

All our stickers are printed with top quality supports and inks, with the best accuracy in cutting and packaging. This grants you a perfect final product that lasts over time. Just place you preferred stickers on your computer, make it unique with a beautiful look!

などと謳ってますが、素人目から見ても良いクオリティだと思います。

特に、Emacsのステッカーがちゃんと縁取られてカッティングされているのが素晴らしいと思います。

f:id:nakazye:20160324233535j:plain

貼ってみたらこんな感じ(その他手元にあったものも貼ってます)。

センス良く配置するって難しいですね。僕みたいにセンスのない人は、少量をバランス良くというのは難しいと思うので、大量に買って埋め尽くすという方針が良いのでは と思いました。

というわけで、Macに貼る為のステッカーを購入してみたというお話でした。

追記

隙間が寂しかったのでもう少し埋めてみました!女子力高くなったやった!

f:id:nakazye:20160325225728j:plain

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

進捗どうですか?

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

僕は全くダメです。

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

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

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

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

こちらになります。

https://gachamaker.herokuapp.com

ソースコードはこちら。

github.com

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

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

f:id:nakazye:20160321235414p:plain

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

技術的な話

サーバー

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

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

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

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

f:id:nakazye:20160322000129p:plain

プロジェクト作成時に、必要なライブラリをこんな感じでぽちぽちしていくだけで終了です。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のドキュメントが、今まで1ページだったのが種類ごとに分かれて、見た目から「どれつかおうかなー」と悩めなくなったのが辛かったです。

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'}]}

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

f:id:nakazye:20160320003125p:plain

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

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;

としてあげることで

f:id:nakazye:20160320004332p:plain

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とグーグル検索しても出てこなかったので記事にしてみました。

同じ問題に長時間はまる人が1人でも減ることを祈ってます(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())

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

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

f:id:nakazye:20160309001739p:plain

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

ここで、

print(oppai())

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

とでもしてみましょう(15回表示を繰り返した)。

すると結果は・・・・

f:id:nakazye:20160309002303p:plain

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

何が言いたいかというと

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

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

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

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

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

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

ヒエログリフを書こう!

ヒエログリフを書こう!

先に感想を短く述べると

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

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

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

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

のっけから面白い

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

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

f:id:nakazye:20160220222617j:plain

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

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

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

文字そのものが楽しい

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

f:id:nakazye:20160220223048j:plain

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

f:id:nakazye:20160220224537j:plain

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

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

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

f:id:nakazye:20160220225047j:plain

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

f:id:nakazye:20160220225414j:plain

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

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

解読の歴史が面白い

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

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

f:id:nakazye:20160220230306j:plain

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

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

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

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

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

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

f:id:nakazye:20160220231117j:plain

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

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

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

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

欲しくなってきません?

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

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

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

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

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

出典

ヒエログリフを書こう!

ヒエログリフを書こう!

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

ISBN-10: 488135888X

監修:吉村 作治

原著:フィリップ アーダ

翻訳:林 啓恵

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

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

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

Britannia -Ultima Online Fun Site-

f:id:nakazye:20160131211456p:plain

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

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

nakazye.hatenablog.com

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

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

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

僕も昔は良かったという思いの強い懐古厨ですが、さすがは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で言うところの要件定義みたいなものですね。

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

f:id:nakazye:20160131205458p:plain

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

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

MindNode 2 – Delightful Mind Mapping

MindNode 2 – Delightful Mind Mapping

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

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

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

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

Sketch - Professional Digital Design for Mac

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

f:id:nakazye:20160131210957p:plain

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

デザインを載せる(カンプ作成)

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

f:id:nakazye:20160131211718p:plain

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

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

HTML作成

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

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

f:id:nakazye:20160131212029p:plain

上記は

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

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

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

f:id:nakazye:20160131212216p:plain

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

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

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

f:id:nakazye:20160131211456p:plain

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の様なフォーマットのテキストを解釈して、指定の形式に変換してくれるツールです。

f:id:nakazye:20160131214233p:plain

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

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

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

github.com

まとめ

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

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

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

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

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

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

おまけ

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

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

最後に再度作ったもの(作ってるもの)へのリンク: Britannia -Ultima Online Fun Site-

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

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

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

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

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

f:id:nakazye:20151122230402p:plain

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

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

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

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

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

ウルティマオンライン

f:id:nakazye:20151122234157p:plain

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

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

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

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

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

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

f:id:nakazye:20151123000342p:plain

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

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

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

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

f:id:nakazye:20151123001302p:plain f:id:nakazye:20151123001332p:plain

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

ただいま

f:id:nakazye:20151123001832p:plain

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

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

f:id:nakazye:20151123002209p:plain

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

f:id:nakazye:20151123002335p:plain

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

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

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

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

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

f:id:nakazye:20151123003056p:plain

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

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

f:id:nakazye:20151123003903p:plain

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

f:id:nakazye:20151123004144j:plain

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

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

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

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

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

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

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

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

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

10年という歳月

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

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

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

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

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

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

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

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

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

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

オチは無い

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

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

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

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

f:id:nakazye:20151123013133j:plain

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

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

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

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

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

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

最後に蛇足

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