【Works】コードを投稿し共有できるサービス「Codetter」をリニューアルしました | Wood-Roots:blog

2018
04/27

コードを投稿し共有できるサービス「Codetter」をリニューアルしました

コードを投稿し共有できるサービスCodetter（こーどったー）をリニューアルしました。

調べてみると2011年7月リリースだった…7年前とは…。

ADs

Codetterとは何か

もともとはTwitterにコードを投稿しづらい（字数制限や昔は改行も入れられなかった）ため、外部に投稿してTwitterにリンクを投稿すればどうかと思い作成したサービスです。

はじめてリリースしたWordPressを使ったWebサービスで、はじめてニュースサイトで紹介されました（ツイナビというサイトです）。
これで味を占めてWordPressでいろいろと作るようになったものの、作れども作れどもパッとしないまま現在に至ります…。

同様のサービス（で遥かに高機能…）はGistやCodePen、jsFiddleなどがありますが、Codetterはもっとフランクにカジュアルに、動くかどうか分からないような雑コードでも投稿できるような、ゆるいサービスを目指したいと思っています。

リニューアルの概要

ロゴの変更

以前のTwitterのロゴをパｋ…モチーフにしたロゴを使っていましたが、今はTwitterも鳥だけのオシャレなロゴになりましたので独自のロゴを作成しました。
「<>」を図案化したものです。

そういえばﾋｩｲﾋﾋｰなどと言われてましたね。懐かしい。

Bootstrap4の使用

これまでCSSフレームワークはfoundationしか使ったことがなかったのですが、今回Bootstrap4を使ってみました。

Bootstrap3以前はデザイン面での主張が強く、一目でBoostrapと分かってしまうものでしたが、Bootstrap4はまさに「フレーム」としての役目に特化したものという印象です。
font-sizeやfont-family、配色などは調整しないと日本語環境で野暮ったくなってしまいますが、主張しすぎないグリッドレイアウトがクラスの付加だけでできあがります。

実際に使ってみて、以下の点を注意すると扱いやすいのではないかなと思います。

レイアウトの調整はクラス付加で行い、自前のスタイルは極力書かない

たとえば白背景のカードっぽいエレメントを作る場合は

1
2
3
4
5
6
7
8
9
<div class="row">
<div class="col panel">
<p>あああああああああ</p>
</div>
</div>
.panel {
background: #fff;
padding: 10px;
}

ではなく、

1
2
3
4
5
<div class="row">
<div class="col p-2 bg-white">
<p>あああああああああ</p>
</div>
</div>

と極力クラスの付加で対応するようにすると、レイアウトの破綻が起きにくいのではないかと思います。

クラスが足せない場合は@extendを活用する

WordPressに限りませんが、CMSが自動で出力するHTMLを修正するのは難易度の高い作業です。
正規表現を使ったりJavascriptで無理やり整形したり、最悪コアファイルをいじらないと修正できないというケースもあります。

そのようなHTMLに対しては、Sassの@extendを使い必要なクラスのスタイルを付加します。

例えば、wp_list_categories()　は以下のようなHTMLを出力しますが、このul>liにナビゲーション用のクラスを付けようとするとフィルターフックで正規表現を書かないといけないためとてもめんどくさいです。

1
2
3
4
5
6
7
8
9
<ul>
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a></li>
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a>
    <ul class="children">
    <li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">子カテゴリー名</a></li>
    <li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">子カテゴリー名</a></li>
    </ul></li>
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a></li>
</ul>

そこでCSSに以下のように書きます。

1
2
3
4
5
6
7
8
9
ul {
@extend .nav;
li {
@extend .nav-item;
a {
@extend .nav-link;
}
}
}

こうすると　ul.nav>li.nav-item>a.nav-link　と同じスタイルが適用できます。

なのでBootstrap4を使うにはSassのビルド環境が必須と言ってもいいでしょう。

Ace(Ajax.org Cloud9 Editor)の導入

これまでは単なるtextareaだったのですが、Aceというエディタ環境を導入しました。
入力中のハイライト表示のほか、タブの入力や自動インデント、アンドゥ・リドゥなどの機能が使用できます。
ただサイト上で入力するよりもエディタからコピペする人のほうが多いだろうとは思います(；´∀｀)

投稿ページだけでなく通常の表示でもReadOnlyモードで使用していますが、個別ページはまだしも一覧ページがだいぶもっさりと重いので何か手段を考えたいと思います…。

サーバーの移管とSSL化

再びKusanagi on ConoHa。
そしてDNSの変更でまた手こずってしまった…。
ConoHaへの課金も着実に増えてきたので誰か！このリンクから申し込んで！

ということで

改めてCodetterをよろしくお願いいたします。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

Category

Archive

Search

Social