カテゴリー: 雑記

Markdown Preview系で使用するCSSを作ってみた

Chrome拡張機能やVisual Studio Codeで利用する
Markdown Previewのために、見栄えをよくするCSSを作ってみました。
github系統をベースに見出しをカスタマイズしています。
見た目はこんな感じです。

Markdown Preview サンプル

CSSは以下になります。

h1 {
  padding: 0.25em 0.5em;
  text-shadow: 0 0 5px white;
  border-left: solid 7px #010079;
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

h2 {
  color: #494949;
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

h3 {
  color: #494949;
  border-bottom: solid 3px #cce4ff;
  position: relative;
}

h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
  text-decoration: none; }

h1 tt, h1 code {
  font-size: inherit; }

h2 tt, h2 code {
  font-size: inherit; }

h3 tt, h3 code {
  font-size: inherit; }

h4 tt, h4 code {
  font-size: inherit; }

h5 tt, h5 code {
  font-size: inherit; }

h6 tt, h6 code {
  font-size: inherit; }

h1 {
  font-size: 28px;
  color: black; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

h5 {
  font-size: 14px; }

h6 {
  color: #777777;
  font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 15px 0; }

hr {
  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0; }

li p.first {
  display: inline-block; }

ul, ol {
  padding-left: 30px; }

ul :first-child, ol :first-child {
  margin-top: 0; }

ul :last-child, ol :last-child {
  margin-bottom: 0; }

dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  color: #777777; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

table {
  padding: 0; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

img {
  max-width: 100%; }

span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px; }

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent; }

.highlight pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }

pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }
  pre code, pre tt {
    background-color: transparent;
    border: none; }

作成にあたって以下を参考にさせて頂きました。

Markdownで考えを整理したりメモしたりするとき、
Previewの見栄えがいい感じだと作業も捗りそうですよね。
良ければ上記参考サイトを見ながら、自分好みに変えてお使いください。

｢第4回 ドワンゴからの挑戦状 予選」を解いてみた

｢第4回 ドワンゴからの挑戦状 予選」の問題が公開されているので
A問題とB問題にチャレンジしてみました。

第4回 ドワンゴからの挑戦状 予選

言語はpythonを選びました。
ちなみに私は競技プログラミングに関してはド素人です。
TopCoderもちょっとだけやってましたが、
がんばってgreen coderになれるかどうかってレベルです。

ニコニコ文字列判定

4文字の文字列が “xyxy” の並びになっているか判定する問題です。

s = input()

if s[0] == s[2] and s[1] == s[3]:
    print("Yes")
else:
    print("No")

最初出力を “yes” と “no” にしており、
大文字にすべき箇所を小文字にしていたので全然通りませんでした。
問題はちゃんと読まなきゃダメですね。。。

2525文字列分解

文字列 s を 25 が並ぶ文字列に分解し、
いくつの部分文字列に分解できるか出力します。
私のコードは 25 という文字列を長さ 0 になるまで除去し続け、
そのループ回数を結果として出力する、という処理になっています。

s = input()

if len(s) % 2:
    print(-1)
    exit()

if s[0] == "5":
    print(-1)
    exit()

if len(list(filter(lambda x: x is "2", s))) != len(list(filter(lambda x: x is "5", s))):
    print(-1)
    exit()

split_count = 0
while True:
    s = s.replace("25", "")

    if len(s) == 0:
        split_count += 1
        break

    elif s[0] == "5":
        print(-1)
        exit()

    else:
        split_count += 1

print(split_count)

こちらは一発で通りましたが、私の解法は計算効率が悪いです。
より効率の良いコードは結果ページから参照できます。

余力があればD問題まではチャレンジしてみたいと思います。

マストドンを使ってみました

はじめに

ここ二週間ほどでにわかに流行り始めたマストドンを試しに利用してみました。
日本国内にもいくつかインスタンスが立ってるみたいですが、
今回はドワンゴさんのインスタンス”friends.nico”で登録しました。

ユーザ登録

下記ページにアクセスするとユーザ登録の画面が出てきますので、
必要な情報を入力して「参加する」ボタンを押下します。
friends.nicoトップページ

top

ログイン

｢参加する」ボタンを押下するとログイン画面に遷移します。
確認用リンクにアクセスするよう求められるので、
登録したメールアドレス宛てに来ている確認用リンクをクリックします。

confirm

すると以下のように確認が完了し、
登録したメールアドレスとパスワードでログインできます。

confirmed

Welcome画面

初回ログインをするとWelcome画面が出てきます。
そこにはマストドンの基本機能に関する解説が
英語で書いてあります。
解説の翻訳は以下の通りです。

exp_post

投稿は投稿用に構成されているカラムから行います。
｢画像のアップロード」、「プライバシー設定の変更」、
｢アイコン下への投稿内容に関する
警告の追加」を行えます。

exp_search_and_prof

ユーザを探すには検索バーを利用し、
#illustrationや#introductionsといったハッシュタグを
確認してみましょう。
このインスタンスに存在しないユーザを探すには、
完全な形式のハンドル名を利用してください。

アバターやbio、表示名を変更するには
プロフィールを編集してください。
プロフィール編集にはその他にも
設定できる項目があります。

exp_each_feature

■ホーム
ホームのタイムラインには
フォローしているユーザの投稿が表示されます。

■通知
通知には誰かがあなたに関わるアクションを
起こしたときに、その内容が表示されます。

■連合タイムライン
連合タイムラインには”friends.nico”がフォローしている
あらゆるユーザの公開されている投稿が表示されます。

■ローカルタイムライン
ローカルタイムラインも
連合タイムラインと同様ですが、
表示される投稿は”friends.nico”内の
ユーザに限定されます。

初期状態

初めてログインしたときのタイムラインはこのように、
何も表示されない静かな状態です。

init_timeline

ここで一番右のカラムにある「連合タイムライン」や
｢ローカルタイムライン」を押すと、
物凄い勢いでトゥートが流れていく様を確認できます。

初めての投稿

以下の内容で試しに投稿してみました。

toot

すると凄まじい勢いで
インスタンス内のユーザから反応がありました。

nico_and_boosted_many

この辺のやり取りはTwitterにはない雰囲気を感じました。

おわりに

未だ使い始めたばかりでイマイチ特徴を掴めていませんが、
趣味趣向の違いを区分としてインスタンスを立てられるだけあり、
Twitterよりも内輪で気軽に盛り上がれるのかな、と感じました。
スマホアプリもあるみたいなのでそちらも利用しつつ、
もう少し使用感を確かめてみようと思います。

Trelloの知っておくと便利な機能 その2

前回はカード作成時のTipsをご紹介しました。
今回は作成済みカードの編集で役立つTipsをいくつかご紹介します。

カードタイトルの編集

カードの上で”e”キーを押すと別画面を開かずに
タイトルの編集ができます。

title editing

ラベル付け

カードの上で”l”キーを押すとラベル選択画面が開き、
ラベル付けができます。
ちなみにカード作成時に使える”#{ラベル名 | 色名}”は
作成済みカードに対しては今のところ利用できません。

labelling part1

またショートカットとして数字キーにラベルが
対応付けられており、カード上で数字キーを押すことでも
ラベル付けができます。
例えばカード上で”1″を押すと緑のラベルが付与されます。

labelling part2

期限の設定

“d”キーを押すと期限設定画面が開きます。
カレンダーからの日付選択、時刻の記入が行えます。

setting due date

カードのアーカイブ

カードの上で”c”キーを押すとそのカードをアーカイブできます。

archiving cards

チェックリストの作成

コピーした複数行に渡る文字列を
チェックリストにペーストしてエンターを押すと、
各行に対応するチェックリストが作成されます。

creating checklists

添付資料の追加

カードの詳細画面を開いた状態で
コピーしたURLを”Ctrl-v”で貼り付けると、
そのカードに添付資料としてコピーしたサイトのリンクを作成できます。


attachement

以上、私がよく使うTrelloのTipsでした。
下記公式ブログでもTrelloの新機能やTipsを紹介しているので、
興味のある方は是非読んでみてください。
Trello公式ブログ

Raspberry Pi 3を買いました

Raspberry Pi 3を買いました。
初代Raspberry Piも簡単なサーバとして使うために買いましたが、
スペック面や無線LAN対応など色々パワーアップしていると聞き、
初代よりも面白いことできるのでは、と思い3を購入しました。

ちなみにこちらが開封して組み立てる直前の写真です。

before

今回は本体のボードの他にケース、マイクロSDカード、
HDMIケーブルや電源アダプタなどが同伴された
Raspberry Pi 1,000万台突破記念キットを買いました。
お値段は一万円ほどでした。

constructed

マイクロSDカードには予めNoobsが入っており、
本体に挿して起動すると簡単にOSをインストールできます。
その際はいくつか用意されているOSからインストールしたいものを選択します。
私はオーソドックスにRaspbianを入れました。

desktop

デスクトップはフラットデザインになっており、
ブラウザはChromiumが標準で入ってます。

初期設定などで少し触ってみた感じでは、
CLI、GUIともに初代よりもサクサク動きます。
Vimにある程度プラグイン入れても大丈夫そうです。

使用用途ですが、AmazonのAlexa Voice Serviceを使って、
自作Amazon Echoでも作ってみようかと思っています。
こちらの進捗についても随時報告していく予定です。

新年のご挨拶

明けましておめでとうございます。

本年もデータベースやvimを中心に
何かしら為になる情報をお届けできるよう、
細々とブログを更新していこうと思います。
どうぞよろしくお願いします。

週一で投稿し続けるのが今年の抱負の一つです・・・