Subscribed unsubscribe Subscribe Subscribe

父が立ち上げたNPO法人のWebサイトをSquarespaceで制作してみた話

育休中自由研究プロジェクト第三弾*1

父が新しく立ち上げたNPO法人のWebサイトをSquarespaceで作ってみたよ!というお話。

amemachi.org

何を作ったのか

雨水まちづくりサポートという非営利活動法人のWebサイトです。

f:id:fuzzy31u:20170315131426p:plain

この団体は簡単に言うと、雨水に関する法律が施行されたことにあたり、その資格作りや普及、技術支援などを目的としたNPO法人です。*2

水資源:雨水の利用の推進に関する法律について - 国土交通省

この立ち上げを、建築士であり雨水の専門家である父が任されたということでサイト制作の相談を受けたのがきっかけ。*3

なぜSquarespaceなのか

www.squarespace.com

自由研究と言えども今回はいちNPO法人のサイトなのであまりにお粗末なサイトを作るわけにはいきません。とは言え育児の片手間1人でゼロベースで制作することは非現実的です。

そこでオウンドメディアですよ。2017年ですもの、静的Webサイト作るのにレンサバ借りてドメイン取って。なんてもうやらなくていいんですよ。ありがたいですね。

中でも特に魅力的だった理由は下記の2つ。

提供元のロゴを入れたくなかった

自社サービスであるAmebaOwndは完全フリーですがPowered by Owndは取り除けないようです。今回は法人サイトなので有料でもロゴが入らないものを選定する必要がありました。

ちなみに。大学生の頃に作った何とも古めかしい父の会社サイトはオウンド研究がてらAmebaOwndに移してみました。*4(未完成)

kamiya-hiroshi.theblog.me

仕事で使っていた

これがけっこう大きくて。私個人は触ったことなかったのですが産休前に働いていた部署で使っていました。復帰後でも無駄にはならないかもしれない経験というのは大きな選定理由です。

Squarespaceの良かったこと、大変だったこと

Squarespaceの使い方に関しては触れだすと果てしない量になるので公式ドキュメントを見てもらうとして。ここでは個人的な良し悪しについて触れようと思います。

良かったこと

コミュニティが充実している

ヘルプQ&Aサイトが驚くほど充実しておりほぼすべての問題がこれらで解決に至りました。

サイト制作からドメイン取得までワンストップでできる

Squarespace内でドメイン取得から反映が可能なので立ち上げがめちゃ簡単。*5

かゆいところに手が届いている

細かい話になりますが。Squarespaceでは基本的にGUIで部品(Block)を置いて作っていくのですが、Code Blockではちょっとしたコードを挿入することができます。 f:id:fuzzy31u:20170315115021p:plain

例えばこのCode Block内のエディタがけっこう良くできてる。

シンタクスチェックやオートインデント、タブインデントなどが普通に効く上に私得なEmacsキーバインドにも対応してるのでIDEで開発してるのと何ら変わらない体験を得られる。ほら、よくこういうポップアップ内エディタって、tab押すと次のリンクに飛んじゃったりしてイラッとすること多いじゃない。

この細やかな気配りにはいささか感動しました。

開発者向けメニューが充実してる

developers.squarespace.com

これまた良くできてるんです。

DeveloperモードをONにするとgitで管理ができるようになります。 さらにさらにローカルでサーバ起動までできるという優れもの。 f:id:fuzzy31u:20170308171049j:plain

基本的にGUIでは即時反映されてしまうのでローンチ後にはありがたいですね。

大変だったこと

日本語の資料がほぼ皆無

膨大な量のドキュメントから自分のやりたいことに辿り着ける英語力がないと少し厳しいかもしれない。

日本語フォントがない

font-familyの選択肢に(当然っちゃ当然ですが)日本語フォントは見当たらない。なので日本語Webフォントを当てたい場合は自分でカスタムフォントを追加する必要がありました。

f:id:fuzzy31u:20170309110105j:plain こういったこともanswersで大概解決します。

カスタムCSSを書く場合の留意点

先に述べたCode Blockで独自classを当てることができます。 f:id:fuzzy31u:20170310155521j:plain

その際、descriptionとか汎用的なclassを定義するとSquarespaceで元々定義されてる名前とかぶって思わぬところが崩れるといったことがありました。なので自分で定義したクラスにはmy-descriptionのように独自prefixを付けています。

細かいスタイル調整にはハックが必要

例えばニュースのページである問題が発生。

ニュース — 特定非営利活動法人 雨水まちづくりサポート

ここは私じゃなくても記事更新できるようにブログの機能を用いたページです。

先に述べたようにタイトルヘッダにはWebフォントを当てています。そのためフォントファイルを生成する際に必要な漢字を予め把握しておく必要がありますが、ブログなのでいつどんなタイトルが入稿されるか予測不能なんですね。

f:id:fuzzy31u:20170310161029j:plain

フォントがない漢字が使われると同じタイトル内で部分的にしかフォントが当たらない問題が起こってしまいました。

そこでだいぶ無理矢理なんですが時には下記のような力技を用いる必要がありました。(もしくはがんばって都度タイトルに使われる漢字を含めたフォントファイルをアップし直すか…)

.blog-list h1 {
  font-family: "Source Sans Pro",sans-serif !important;  // ブログ一覧の時だけデフォルトフォントに戻す
  font-size: 24px;
  line-height: 1.2em !important;
}  

良くも悪くも

型にしっかりはまっている=デザインの自由度は低い

例えばロゴ。ロゴ/タイトルの設定ページでは画像によるLOGOもしくはテキストによるTITLEしか設定できない仕様です。

f:id:fuzzy31u:20170314110906j:plain

これにはタイトルとロゴを同時に設定することは2重の意味を持たせることになるのでNGという確固たる理由があるそうです。

answers.squarespace.com

ははん、なるほどね。ということでロゴのみ設定。

f:id:fuzzy31u:20170314171447j:plain

一方、父からは「サイトに訪れる年齢層は高い(Webリテラシーが低め)からあまりモダンなサイトにしないで欲しい」とSquarespaceという選択に相反した要望をもらっていました。
ここで何が問題かと言うと「他のページからTOPに戻れないからメインメニューにTOPへという項目を入れるのはどうか」というとんでもリクエストが来たんですね。なるほどロゴを押すとTOPへ戻るという発想がないらしい。

悩んだ挙句ヘルプにもOptionalで書いてある通り画像の中にサイトタイトルも入れるという策に至りました。 f:id:fuzzy31u:20170314171759j:plain

制約が厳しいが故に型にはまった綺麗なサイト構成が実現できているのですが、裏を返せばデザインの自由度は低いので、ちょっとカスタマイズしたい時に調べないと実現できない。かと言ってあまりにカスタマイズしすぎるとデザイン崩れやSEOの面でサポートできないとのこと。

結論

広義ではCMSと言えども少し凝ったことがしたい場合にはマークアップやHTMLの知識が皆無だとやっぱり厳しそうです。

またSquarespaceは細かいところまで調整できるのが魅力ですが、コーディング経験がなく英語での問題解決も難しい場合はAmebaOwndで十分事足りると思いました。

*1:第一弾第二弾は第一子産休中に自由研究してました

*2:専門ではないので、あくまで父から伝え聞いただけの個人の解釈です

*3:実際は「どこか良いホームページ制作会社はないか」と相談されたのだけど、そんなことは知らない上に納品された後のメンテどうすんのとか話してるうちに「だったら私が復帰へのリハビリがてらやってあげるよ」となったのが経緯

*4:会社自体は既に畳んでいるのですが未だにHP経由で仕事が来るとかでクローズできずにおり、ずっとフリーの場所に移したいと考えていたのでついでに

*5:Squarespaceに限らないと思いますが

既存サービスクローンを3日で作ってみた話

3日でというのは何もミサワ感を出したかったわけではない。
赤ん坊片手に作業するのは3日が限界で、それ以上かかるようならやめようと思っていた。

模倣したサービスはママツイという、ママに特化したTwitter。クローズを嘆くユーザがたくさんいたので、簡単にできるようなら逃げ場を作ろうかなと思った。ベースはTwitterなわけだからきっとCMSぐらいいっぱいあるだろうと。そしたら案外さくっと立てられるのでは?と。
もちろんそんな簡単な話ではないのだけど、何かを作ることに飢えていた私は期限を設けてやってみることにした。
※簡単に、ママツイとは…”いいね”の代わりに”応援する”、”ありがとう”返しがある、ユーザ層に特化した柔らかなUIのTwitterで、Amebaサービスのひとつ

結果、機能はするけどプロダクトレベルには程遠いクオリティのサイトが完成した。

ママツイクローン

まま、何事も無駄なことはないわけで、せっかく弄ったのでやってみたことの記録です。

やったこと

マイクロブログCMS検討

調べてみたら、いっぱいあった。選択基準としてはやはり情報量。
StatusNetというオープンソースソフトウェアがこの中ではポピュラーっぽかった。
たいしてニーズがないのか、言うほどの情報量はなかったんだけども。

AWSでの環境構築

こちらはだいぶ慣れてきたよ。Docker触ってみたけど結局使わない気がしたので今回は最初からEC2インスタンス上で作業。
Route53でドメイン登録できるようになったらしいので初挑戦。
Hosted ZoneとかあんまりよくわかってないけどワンストップでブラウズできるようになってSUGEEEってなった。

CMS展開

大学生以来のLAMP環境構築。
0208:[ユーティリティ/ポータル]Statusnetをインストールしてみよう!を参考にインストール
とても簡単だった。PHPのすぐ動くっぷりにびっくり。

# インストール
$ sudo yum install -y httpd.x86_64 php.x86_64 mysql-server emacs php-mysql php-gd php-xml php-mbstring
$ emacs /etc/my.cnf
$ emacs /var/www/html/info.php
$ wget http://status.net/statusnet-1.1.1.tar.gz .
$ tar zxfv statusnet-1.1.1.tar.gz
$ sudo chown -R apache:apache /var/www/html

# DB設定
mysql> create database statusnet;
mysql> grant all privileges on statusnet.* to statusnetuser@localhost identified by 'statusnetpass';

# 日本語化
$ sudo yum install gettext
$ sudo make

文言、日本語修正

立ち上がって見てみてびっくり、日本語が酷い。
”画像”は「アバター」と表現するし、「デフォルトタイムゾーン; 通常UTC。」とか平気で書いてある。まあ直訳なわけです。なので日本語を直してみる。
国際化対応ファイルを弄るだけかと思いきや、そう簡単ではなかった。
locale/ja/配下には.poといったファイルや.moといったバイナリファイルがあった。どうやらStatusNetではgettextというライブラリを使っているよう。.poに日本語を発見したのだが直接編集ができなかった。これを編集するにはPoEditなどのGUIエディタで編集するのが一般的だとか。
リモートのAmazonLinux上で直接触ってたのでちょっとこれは面倒だ。
ということで迷った挙句、grep findで直接phpファイルを編集するという荒業にでた。複数ファイル弄った時点でカオスってきて、もうこの時点でメンテナンス性なんてものは諦めた。どうせ作りっぱなしで数カ月後にインスタンス落とすんだし、いいや。

html、css修正

起動直後はこんな感じの見てくれでした。

http://ec2-54-65-67-193.ap-northeast-1.compute.amazonaws.com

ママツイもどきというぐらいなのでもうちょい似せたいところ。と思いきやどこを探してもHTMLらしきものが記述してあるファイルがないじゃない。探してびっくり、テンプレートエンジン的なものは使っておらず、なんと全てのHTML構造がコード中に記述してあった。 例えばこんな感じ。

{
        $this->elementStart('div', array('id' => 'content', 'class' => 'hentry'));
        $this->showPageTitle();
        $this->showPageNoticeBlock();
        $this->elementStart('div', array('id' => 'content_inner', 'class' => 'entry-content'));
        // show the actual content (forms, lists, whatever)
        $this->showContent();
        $this->elementEnd('div');
        $this->elementEnd('div');
    }

このOSS自体が古臭いにおいは最初からしていたが、衝撃だった。というかどうやってテストしているのだ?表示確認は?逆にやりづらいだろこれ。
と疑問は多く残るものの、しょうがないのでclassやid名からgrep findして該当箇所の見当をつけ、CSSを編集していった。

そんな感じで何となく作ったんだけど、これ以上はどうにもならない問題もあった。

問題点

StatusNet、開発もだいぶ前っぽいし最近メンテされてる感じもなく、とにかくモダンじゃない。

スマホ最適化ができない

1番のポイント。Bootstrapを無理矢理組み込んでみたんだけど、前述のとおりHTMLがPHPコード中にガチガチに組み込まれており、class=“container"を1個つけるにも一苦労。今の私のマークアップ力ではデスクトップサイト用に作りこまれたものをスマホ表示最適化するには至らなかった。

認証がモダンじゃない

デフォの登録フォームはこんな感じ。 http://ec2-54-65-67-193.ap-northeast-1.compute.amazonaws.com/index.php/main/register

タイムゾーンとか選ばないといけない仕様。 協力してくれる人が数名いたのだけど、何よりメアドを登録させる(つまり手元に知らん人のメアドがある)時点で個人管理のサイトとしては恐ろしい。このご時世認証はOAuthにしたいものだ。

ということで結論、TwitterクローンのCMS、デフォのサイトをイントラネットなどで使う分には良いだろうけど、今のところ一般ユーザ向けではなさそうです。というお話。

産休中の妊婦もWebアプリつくってみた

6月に第一子が産まれたわけですが、いつ陣痛が来るかドキドキしながら直前まで開発していた記録です。
技術的に凝ったことは一切しておりません。 レスポンシブに拘ったぐらい。

何をつくったのか

捨て猫ちゃんまとめサイトをつくりました。
何の変哲もない至ってシンプルなWebアプリケーションです。

f:id:fuzzy31u:20140729201349p:plain

担当美容師にこんなサイトが欲しい!と言われたのがきっかけ。

何ができるのか

捨て猫情報を集約し、各ページにソーシャルボタンを設置。
よく「拡散希望、里親募集」が記載された投稿を見かけるものの、個人の投稿では限界があるのでまとめました。
この手の投稿ってソーシャルと親和性高いはずなのに既存の里親募集サイトってぜんぜんソーシャル要素がないじゃない。少なくとも私にはサイト管理者が手動でアップしてるようなのしか見つかりませんでした。

何でつくったのか

1つは、フロントエンドの実装をやってみたかったから。
もう1つは、Webアプリを公開するところまで、1人で開発してみたかったから。
自分はなにか特定の技術に精通しているわけでもなく、「私って何屋なんだろう?」と常日頃から思ってまして。この産休のタイミングで1人で上から下までやってみようと思ったのです。

制作期間

1日5,6時間で2週間ほど。(最低限の要素完成まで)
※学習、調査、技術選定含む
日によってはもっと短かったり長かったり。

使ったもの

Python2.7、DjangoInstagram API、Bootstrap3、Wookmark.js、Fabric、AWS EC2、AWS Route53、VagrantGithub

やったこと

Day1

Day2

Day3

  • ローカル開発環境の構築@ドットインストール

Day4

  • Vagrantで環境構築->Provisioningツール調査->ChefはオオゴトなのでAnsibleかFabricを調査
  • 個人プロジェクトなので最もお手軽なFabricに決定(実際はFabric検証してこれでいっかってなった)

Day5

Day6

  • ようやくアプリ開発開始
  • RWDについて調べる
  • モダンなサイトになるようにBootstrapのGridSystemを読む
  • YeomanでBootstrap, Angularのひな形を構築しようと試みる
  • yo angularでこける、bower_componentsパッケージが生成されないエラーでど嵌る

Day7

  • ローカルでどうしてもできなかったYeoman、VMのCentOS6.4ではちゃんとインストールできる->大したアプリじゃないし時間もったいないのでYeomanは断念

Day8

  • Webサーバについて調べる->Apache?Nginx?->結局乗せるとこまで至らなかったが
  • Python on Local Web開発のセットアップwith IntelliJ->ログ
  • Django, wsgi勉強

Day9

Day10

Day11

  • Instagram APIデータ取得->画面表示までをDjangoプロジェクトでやってみる
  • staticリソースをどこに置けばいいのかわからず、プロジェクト構成のベストプラクティスを調査

Day12

Day13

Day14

  • 修正、整形->最低限の形にはなる

空き時間に

  • ソーシャルボタン追加したり
  • インフィニティスクロール仕様にしたり

振り返って

  • 構成管理ツールの調査やプロビジョニングに時間かけた割に、インスタンス破壊したり作り直したりはほぼしなかった。勉強にはなったので無駄とは思ってない。
  • やはりフロント周りに難あり。ページのauto reload後、appendしつつBootstrapのスタイルがどうしても当たらなくて無理矢理スタイリングしたり。(未解決なので誰か助けて欲しい)
  • 個人のしがないWebアプリのため、技術選定の際は最も手とり速いものを重視して選んでしまった。臨月だったので出産の期限が迫ってたことも一因。
  • どれもこれも薄っぺらい知識しかないけどプロトタイプぐらいは作れそう。
  • 防衛的にベータとか付けたものの、メンテする予定はない。というか初育児につき現在その余裕がない。
  • 開発当初は里親マッチングとかできたらいいなと思ったけど開発以外の問題で難しそうだ。

OSCON2013に行ってきた

だいぶ前ですが、オレゴン州ポートランドで開催されたOSCONに行ってきました。

f:id:fuzzy31u:20130724002033j:plain

海外のITカンファレンスには初めての参加だったので、初参加なりの感想を書き留めておきます。 
 

予想外だったこと

考えてみれば当たり前なのですが、ユーザカンファレンスではないのでセッションはプロダクトの紹介が多いです。

参加前は「ここでしか聞けないあのサービスのテクニック…!」的なものを勝手に期待してましたが、結果的に目から鱗みたいなものはありませんでした。
 

びっくりしたこと

毎朝Keynotesという基調講演があるのですが、そこにホワイトハウスのお偉いさんが登壇してたこと。
f:id:fuzzy31u:20130726020121j:plain
こういったギークイベントに政界のエグゼクティブが登壇して「政治とOSS」っていうテーマができちゃうぐらい政府とコードが密接なんだとか。ホワイトハウスAPIなんてものがあるようです。
日本でも最近総務省の統計データのAPIが公開されてましたが、GitHubにコードがあがってくる日は来るのでしょうか。
 

よかったこと

開発の中の人が直接話す

Spring Frameworkの開発者やJavaEE/GlassFishエバンジェリストが直接プロダクトについて話すこと。内容はプロダクトの紹介なのですが、普段使ってるFWなりツールなりを開発してる人が目の前にいるってだけで興奮しますよね。まあそれに見惚れてると聞き取れずに終わってしまうのですが。

OSS界のトレンドを広く浅く知れる

セッション一覧を見てるとわかる通り、OSSの世界で何がトレンドなのか、をざっくり知ることができました。リアルタイム通信の実装方法や構成管理ツール、開発手法、モバイルアプリケーションなどなど。
「ここは引き続き追っていこう」とか「こんなツールが流行ってるんだ」などの発見がありました。
f:id:fuzzy31u:20140724115615j:plain
 

よくなかったこと

会場が寒い。とにかく寒い。骨と皮だけの日本人にはあの温度に耐えられず、我々だけ真冬の装いでした。

 

おまけ

SFでSUGEEEってなったもののひとつがSquare。タクシーはみんなこれでした。
クレジット決済が面倒だっていう小さいお店とかは導入してみたらいいと思う。帰国後早速買ってみたけど導入すごく簡単でした。