Qrunchをユーザーブログどころじゃなくカスタマイズしてみた

公開日:2019-03-04
最終更新:2019-06-01

はじめに

Qrunch、気に入っています。
まだβ版で人も少ないですが、アウトプットが気軽にできるのは楽しいです(最近は忙しくしていてサボり気味でしたが)。

この記事では「〇〇だったらいいな」というQrunchへの願望を実現すべく、ユーザースタイルシートなどでカスタマイズを行います。

Qrunchのユーザーブログのカスタマイズについてはこちらの記事をどうぞ。
(ついさっきEditorialテーマがテスト公開されましたね。そちらのカスタマイズも書いたのでどうぞ!)

謎のスペースがないといいな

qrunch.netにてheader .buttons > .userをクリックすると何故か大きな空白が文書右側に空いてしまうのですが私だけですかね?

しかしユーザースタイルシートを用いれば解決です!
見たところ.profile > .innerが必要以上に横に広がってしまっているようです。
こういうときは、max-width!
max-widthで指定した幅を超えないようになります。

@-moz-document url-prefix("https://qrunch.net/") {  
    .profile>.inner {  
        max-width: 100%;  
    }  
}  

(上記はMozilla FormatのCSSで、Stylusなどの拡張機能にインポートすることのできる形式です)。

文書の高さが最低でもビューポート分はあったらいいな

HTML文書の高さがWebブラウザの表示領域(ビューポート)よりも小さかった場合、その文書の下に空白が空いてしまいます。

┌──────────────────────────────┐  
| ──────────────────────────── |  
│            header            │  
| ──────────────────────────── |  
│             main             │  
│             main             │  
│ ──────────────────────────── │  
│            footer            │  
│ ──────────────────────────── │  
│                              │  
│           !YOHAKU!           │  
└──────────────────────────────┘  

これがqrunch.io下のいくつかのページで起きてしまっていて、ちょっと不格好です。
実害はないのですが妙に気になってしまうので、ユーザースタイルシートの例としても修正方法を挙げておきます。

こういった場合はまず、bodymin-height: 100vh;をあてます。
先程のmax-の反対で、指定した長さよりも短くならないようになります。

ただ、これだけだとbodyが広がっただけです。
メインコンテンツ(上記AAの例だとmain)を広げる必要があります。

そこで、bodyに対しdisplay: flex; flex-direction: column;します。
flexは、要素の子をフレキシブルに伸長したりすることができるようにするものです。
directioncolumnとすることで小要素を横ではなく縦に並べます。

その上で、mainに対しflex-grow: 1;してmainの縦横を広げます。

これで、ビューポートに合わせてmainが伸長し残念な空白が消えます!

@-moz-document url("https://qrunch.io/"),  
url("https://qrunch.io/entries"),  
url("https://qrunch.io/logs"),  
url("https://qrunch.io/comments"),  
url("https://qrunch.io/notifications"),  
url("https://qrunch.io/settings"),  
url("https://qrunch.io/analytics") {  
    #ctrl-dashboard {  
        min-height: 100vh;  
        display: flex;  
        flex-direction: column;  
    }  

    #ctrl-dashboard>main {  
        flex-grow: 1;  
    }  

    /* mainの子の高さも100%に */  
    .flex-container {  
        height: 100%;  
    }  
}  

フォントが等幅だといいな

codeタグの中身やエディターなど、等幅フォントで表示された方がありがたい場面があります。

これは簡単。

@-moz-document regexp("https:\\/\\/qrunch\\.io\\/entries\\/edit"),  
regexp("https:\\/\\/qrunch\\.io\\/logs\\/edit"),  
regexp("https:\\/\\/qrunch\\.io\\/entries\\/.*?\\/edit"),  
regexp("https:\\/\\/qrunch\\.io\\/logs\\/.*?\\/edit") {  
    /* フォントを等幅に */  
    .CodeMirror-code,  
    .markdown-body code {  
        font-family: Consolas, Liberation Mono, Menlo, Courier, monospace !important;  
    }  
}  

@-moz-document url-prefix("https://qrunch.net/@") {  
    .content code {  
        font-family: Consolas, Liberation Mono, Menlo, Courier, monospace !important;  
    }  
}  

font-familyはきっと多くの人が馴染み深いであろうQiitaを参考にしました。

記事のアクセス解析がもっとコンパクトにまとまってたらいいな

qrunch.io/analyticsのページを見てもらえばわかるのですが、スペースが空きまくりです。
特に困ってはいないのですが、せっかくなので.entryを2列にして省スペース化してみます。

@-moz-document url("https://qrunch.io/analytics") {  
    /* ついでにPV数表示用のflex-boxも幅を広げてしまいます */  
    .access-data {  
        flex-grow: 1;  
    }  

    /* 基本的にはこれだけ */  
    .entry-analytics {  
        display: grid;  
        grid-template-columns: 50% 50%;  
    }  

    /* 背景色を変える */  
    #ctrl-dashboard main .analytics-content .entry-analytics .entry:nth-child(2n) {  
        background: transparent;  
    }  

    #ctrl-dashboard main .analytics-content .entry-analytics .entry:nth-child(4n + 3),  
    #ctrl-dashboard main .analytics-content .entry-analytics .entry:nth-child(4n + 4) {  
        background: #fafafa;  
    }  
}  

display: grid;を用いました。
CSSだけでできるモダンなテーブルレイアウトみたいなものです(違う)。
grid-template-columnsで縦方向の列を定義します。50% 50%で2列です。

ん? エディターの高さって読み込み時に決まるの?

  1. 開発者ツールを出す
  2. qrunch.io/logs/editなどのページへ行く
  3. 開発者ツールをしまう
  4. エディターちっちゃ!

ページ読み込み時にJavaScriptで高さを決めているのでしょうか…?
気になってしまった(凝り性)のでなんとかしようとしました。

@-moz-document regexp("https:\\/\\/qrunch\\.io\\/entries\\/edit"),  
regexp("https:\\/\\/qrunch\\.io\\/logs\\/edit"),  
regexp("https:\\/\\/qrunch\\.io\\/entries\\/.*?\\/edit"),  
regexp("https:\\/\\/qrunch\\.io\\/logs\\/.*?\\/edit") {  
    /* あまりうまくいっていない */  
    #ctrl-dashboard-editor {  
        height: 100vh;  

        display: flex;  
        flex-direction: column;  
    }  

    #ctrl-dashboard-editor>form {  
        flex-grow: 1;  

        display: flex;  
        flex-direction: column;  
    }  

    #editor {  
        flex-grow: 1;  
    }  
}  

先程のcolumnflexからのgrowを使いましたが、あまりうまくいっていません。


このエディターのページ、結構手が込んでいて複雑です。
ログ編集ページを例に上げると…。

エディター全体がformタグで囲まれています。
formsubmitされると/logs/edit/submitへデータをPOSTします。

  • input[type="hidden"][name="utf-8"][value=""]
    • UTF-8で記述されているか
    • ユーザーによる変更は禁止かと思われる
  • input[type="hidden"][name="authenticity_token"]
    • 信頼がおけるかの判断用
    • base64っぽいvalue
    • ユーザーによる変更は禁止かと思われる
  • input[type="input"][name="title"]
    • ログのタイトル
  • input[type="checkbox"][name="register_to_qrunch_net"]
    • 記事をQrunch.netに登録するか
  • input[type="select-multiple"]
    • カテゴリやタグ用
  • input[type="hidden"][name="status"]
    • 公開範囲
    • headerの保存ボタンを押すと、これにpubliconly-meprivateいずれかの値がセットされ、submitされる
    • ユーザーによる変更は禁止かと思われる
  • textarea[name="content"]
    • Markdownの内容が入っている
  • textarea
    • エディターのカーソルの位置にある
    • 入力を受け付けるためのもの?
  • input[type="hidden"][name="content_html"]
    • HTMLとしての入力内容
    • 自動で更新される
  • button[type="submit"][style="display:none;"]
    • 送信用ボタン
    • headerの保存ボタンを用いてJavaScriptでsubmitイベントを発火させるため、非表示

すごい(遠い目)。

また、入力された文字列に対し装飾をしているので、それも相まってより複雑になっています…。

ここにはあまり手を入れないほうがいいかもしれませんね。

JavaScriptを使っていろいろする場合は…

QrunchではAjaxを用いてHTMLを部分的に書き換えることでページ遷移を実行しています。
なので、従来のユーザースクリプト拡張機能では発火しません。

そこで、JavaScriptを用いたカスタマイズをする場合には、拡張機能を自作する必要があります。

拡張機能の自作

Webブラウザの拡張機能は、メタデータや権限を記したmanifest.jsonとそれから呼び出されるJavaScriptによって構成されています。

今回作った拡張機能は以下のようになっています。
(なお、私はChrome Web Storeへの開発者登録(有料)をしていないので、この拡張機能のGoogle Chromeへの対応はしていません。今回作ったのはFirefox向けのものです)。

↓ディレクトリ構造

.  
├── README.md  
└── src  
    ├── background.js  
    ├── backgroundInit.js  
    ├── manifest.json  
    └── scripts  
        └── alert.js  

↓manifest.json

{  
    "manifest_version": 2,  
    "name": "more Qrunch!",  
    "version": "1.0.0",  
    "description": "Qrunchをもっと使いやすく",  
    "background": {  
        "scripts": [  
            "backgroundInit.js",  
            "background.js"  
        ]  
    },  
    "permissions": [  
        "tabs",  
        // 今回はユーザーブログ(username.qrunch.io)はカスタマイズしません  
        "https://qrunch.io/*",  
        "https://qrunch.net/*"  
    ]  
}  

GitHub: okayu-tar-gz/moreQrunch: QrunchなどのSPAなサイトでもUser Scriptをしてみるテスト

やっていることは、

  1. backgroundInit.jsbackground.jsをバックグラウンドスクリプトとして読み込み
  2. backgroundInit.jsではスクリプトの登録を行い、
  3. background.jsではタブのステータスがアップデートされた場合にそのタブのURLにマッチするスクリプトを実行する

だけです。

実行するスクリプトは./src/scripts/の中に入っています。
デフォルトでは、/^https:\/\/qrunch\.net/にマッチし、かつ/^https:\/\/qrunch\.net\/timeline$/にマッチしないURLで、/scripts/alert.jsにかかれているalert('Hello, Qrunch!');を実行するだけです。


この拡張機能を使いたい場合は各々でGitHubからダウンロード・編集・署名をしてください。
ライセンスはよくわからないのでパブリックドメインです。公序良俗に反しない常識的な範囲で自由にどうぞ。

Storage APIとかを使って拡張機能上でスクリプトの作成などを行うようにすれば拡張機能として公開できるでしょうが、めんどくさい私にその余力はありません。
ふぉーくみー。

おわりに

Qrunchにはぜひとも頑張って欲しいですし、私自身もよりよい記事を書けるように頑張ります!

記事が少しでもいいなと思ったらクラップを送ってみよう!
54
+1
@okayuの大して技術的ではないブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする