Markdownを使おう

情報系学生でMarkdownについて知っている人が少ないと感じるのは私だけだろうか…

自己紹介

ららーいおん．ディジコンアドベントカレンダー12/11担当のぷれーんと申します．

adventar.org

白上フブキの金コイ耐久を作業用BGMにするエンジニア見習いです．

目次

Markdown概要

皆さんはMarkdownをご存じだろうか f:id:Mr_Plain:20211211233042p:plain

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。Wikioedia -Markdown-

以前書いたブログでも少し触れたが，このHatena BlogはMarkdownで書かれている．
私はちょっとしたメモや文書を作成するときに多用している．
シンプルな文書でもMarkdownを使用することで「見出し」「リスト」「文字色」などを加えることができる．
今回はそんなMarkdownの魅力について紹介し，少しでもユーザが増えるよう布教をできればと思う．

Markdownのメリット・デメリット

まずはMarkdownのメリット・デメリットについて触れる．

メリット

  • 文書に構造を持たせて見やすくすることができる
  • HTMLタグが使える
  • 色々なサービスで使える(Github，Qiitaなど)
  • 環境構築によってPDFやHTMLなどに変換ができる
  • 書き方が覚えやすい(主観)

デメリット

  • 環境構築が面倒くさい
  • サービスによって見た目が変わることがある
  • 多少は覚えることがある
  • 思っているほど自由度は高くない(主観)

Markdownの始め方

ちょっと気になってきたよって方はDillingerなどブラウザエディタで遊んでみましょう． 書き方は下サイトがわかりやすい．

qiita.com

環境構築

必要なものは以下の通りです

作成したMarkdown文書がこちら f:id:Mr_Plain:20211211231717j:plain 左側が元の文書で，Markdownによって右側のように見やすい形に!!(VSCodeのテーマのせいで見づらい...)

最近はまっているMarkdownの便利な機能

「テキストからスライド作れないかなー」って考えていた時に見つけた便利機能
「Marp」
VSCodeに拡張機能を入れて，自分の書いたMarkdownテキストをスライド形式にすることができる．
作成したスライドが下の画像 f:id:Mr_Plain:20211211233647j:plain これからゼミの資料はこれで作りたい
CSSでスライドの見栄えが変えられるらしいからこれからも勉強せねば

マルチディスプレイのすゝめ

「初心者はモニターの上下にモニターを置かずモニターの左右にモニターを置かず」と言えり


自己紹介

どおーも，どおーもー

ディジコンアドベントカレンダー12/3担当のぷれーんと申します

adventar.org

ネットの隅っこで細々暮らしている人間です


本題

今回ご紹介するのはマルチディスプレイです(ジャ●ネット風)

オンライン授業やリモートワーク等で自宅のパソコンで作業する人は増えました

画面の作業スペース少なくないですか？足りてますか？

レポートに追われている学生やエンジニア見習いの我々であれば，プログラムを書きながら調べ物をしたり，

ゲームを楽しむ人であれば，ゲーム画面と通話画面やOBSであったり．

オンライン会議中にPDF等の資料を観たり，画面の内容を共有したり．

ウィンドウをあっちこっち移動して，間違って閉じたりして...


作業効率悪いですよ

モニターを増設しましょう


モニターは2枚以上あると良い

「FX モニター」で検索をして見てください

流石にこれはやりすぎwww

しかし，モニターは2枚以上あると良いのです

まずは現在使用しているメインモニターに加えてサブモニターを増設しましょう

f:id:Mr_Plain:20211203210940p:plain

「ノートPCだよ」って方も大丈夫増設した方が快適です

f:id:Mr_Plain:20211203211235j:plain

簡単なサブモニターの使い方

  • 調べもの(作業中の検索)
  • SNS(私はTwitter，Discord，LINE等を開いています)
  • YouTubeや音楽再生ソフト等で作業用BGMの再生
  • ゲームのオート周回

    • 他にも作業内容やタスクの量によってサブモニターは輝きます


    縦置きは良いぞ

    先日，私のデスクに置かれた3枚のモニターの内1枚を縦向きにしました

    予てよりモニターを縦にしたいと考えていましたが面倒くささが勝って...

    縦置きにしたことで私の作業スペースは更に快適になりました

    f:id:Mr_Plain:20211203214305j:plain

    縦置きのメリット

  • 多くのwebページが縦長に作られているため，webページの全体が見やすい
  • 同じような理由で文書作成がしやすい
  • 横に広かったものが縦になったため，首を振らずに済む
  • デスク上の省スペース化につながる

    • 縦置きのデメリット

  • 縦に長くなるため，少し見上げる形になる
  • 動画を全画面表示にすると，上下に黒枠が発生する
  • webサイトの横側が見切れることがある
  • そもそも縦置き対応していないモニターで，買い替え，買い足しの必要がある


    • マルチディスプレイに便利なアイテム

  • モニターアーム

    • 先日のAmazonブラックフライデーセールでモニターアームを買い換えました

    [Amazonブランド] Eono(イオーノ) モニターアーム 液晶ディスプレイアーム 1画面 32インチ 自立 モニタースタンド ノートパソコン 縦 VESA75x75mm 100x100mm 耐荷重2-8kg グロメット式 クランプ式

    [Amazonブランド] Eono(イオーノ) モニターアーム 液晶ディスプレイアーム 1画面 32インチ 自立 モニタースタンド ノートパソコン 縦 VESA75x75mm 100x100mm 耐荷重2-8kg グロメット式 クランプ式

    • Eono
    Amazon

    表示面側にアームを付けるというおかしな商品紹介画像ですが，使用感はとても良く不良などはありませんでした

    唯一文句があるとすれば，配線用のプラパーツにケーブルを通しにくいです

  • スリムベゼルモニター

    • スリムベゼルモニターとはベゼル(モニターの淵，枠)が狭いモニターのことです

    マルチディスプレイにする時には，ベゼルが小さい方がマウスカーソルの移動がスムーズで気になりにくくなります

    私は下のモニターを使っています

    Acer ゲーミングモニター Nitro 23.8インチ VG240Ybmiifx IPS 1ms(VRB) 75Hz FPS向き フルHD FreeSync フレームレス HDMIx2 スピーカー内蔵 ブルーライト軽減

    Acer ゲーミングモニター Nitro 23.8インチ VG240Ybmiifx IPS 1ms(VRB) 75Hz FPS向き フルHD FreeSync フレームレス HDMIx2 スピーカー内蔵 ブルーライト軽減

    Amazon
    I・Oデータ 24．5型ワイド液晶ディスプレイ GigaCrysta KH252V-ZS

    I・Oデータ 24．5型ワイド液晶ディスプレイ GigaCrysta KH252V-ZS

    Amazon

    マルチディスプレイにして快適な作業ライフを送ろう

    hタグで文字を太くするのやめよう

    ブログやウェブサイトを見ていると時たま不思議な使い方をしているタグを見かけるのです．
    かく言う私も間違った使い方をしていたものがありました．
    そう，hタグです．



    MarkdownとHTML


    今回はウェブページやブログを書くときに使用する言語なんだなって思ってもらえれば結構です．
    どちらもマークアップ言語というプログラミング言語に分類されます．

    マークアップ言語（マークアップげんご、英: markup language）は、組版指定に使われる言語と言える[1],[2]。視覚表現や文章構造などを記述するための形式言語である。テキストファイルであることが多いが、バイナリデータによる形式もある。 “英: markup”という語は英語圏の出版業界で著者、編集者、印刷者の間で指示を伝える方法を意味していた（語源を参照）。 wikipedia-『マークアップ言語』


    HTML(HyperText Markup Language)はハイパーテキストというものを記述するための言語です．ウェブページを作るときに使用されます．タグ(識別のための目印)でプレーンテキストを囲み要素とします．

    markdownはホームページを簡単に書くための言語で，HTMLのタグや記法の一部を使用することができます．githubのREADMEや，はてなブログにも使われます．

    私のブログはファイル形式がMarkdownになっています．しかし，Markdownで記述をするときの特有の記法（空白2つで改行，一部のタグを書くときに改行を入れる必要があるなど）に慣れず，結局HTMLのような記述しています．



    「hタグ」ってなんだ？

    では，今回の本題に入ります．
    最初に述べられていたhタグとは何でしょう．
    h1～h6まであるので，実際に書いてみます

    コード

    <h1>文字　or　# 文字
<h2>文字　or　## 文字
<h3>文字　or　### 文字
<h4>文字　or　#### 文字
<h5>文字　or　##### 文字
<h6>文字　or　###### 文字


    表示結果

    文字

    文字

    文字

    文字

    文字
    文字


    ヤッターモジガオオキクナッター

    そう思っていませんか？
    私はそう思っていました．

    太くしたい文字を<h3>で成形したりして…

    （hタグで文字を大きくするのは）駄目です

    hタグは「見出し」に使われるものです．
    別にいいじゃんと思う人は少なくないと思いますので，それについて解説します．


    どうして「hタグ」が使われるの？

    ページにタイトル・見出し・小見出しがはっきり書いてあると読みやすいですよね．しかし，hタグによってページが見やすくなるのは我々ユーザーだけではないのです．
    ユーザーは何か調べたいことがあるときに検索サイトの検索窓にキーワードを打ち込みます．
    「マークダウン　インラインコード　表示されない」
    というのはこの記事を書いたときの最も新しい検索ワードです．

    hタグを正しく使うことでSEO対策になります．
    SEO対策とは，検索サイトの検索結果に表示させやすくするためのものだと思ってください．
    検索エンジンがページの内容を理解するときに参考にしているものがページ構成です．中でも，ページのタイトルともいえるh1，ページの内容となる見出しのh2は正しく使わなければなりません．
    正しくタグが使われたページというものは検索エンジンにも評価してもらいやすくなり，検索結果の上位に表示されやすくなります．自分の書いたページを見てもらうためにはとても大切なことですね．


    じゃあどうやって文字を太くするんだい？

    ここまで読んで，hタグで文字を太くしてはいけないということは分かっていただけたかと思います．
    しかし，hタグが文字を太くする手段だと考えていた人は，文字を太くする手段を失ってしまいました．
    ここで文字を太く表示させる方法をいくつか紹介します．

    b要素・strong要素

    <b>や<strong>で囲まれた要素は太字で表示されます．
    b要素は単純に太字に，strong要素は文字を強調したいときに使用します

    コード

    文字が<b>太字</b>で表示されます<br>
文字が<strong>太字</strong>で表示されます

    表示結果

    文字が太字で表示されます
    文字が太字で表示されます


    CSS

    cssはHTMLやMarkdownの見た目を整えるものです．
    idやclassを設定することで，それに対応した部分の見た目を変えることができます．

    今回は太くしたい部分を<a id="bold1"></a>で囲みます． <style></style>の中にどのように変えるかを記述します．

    コード

    <style>
#Bold1{
font-weight: bold;
}
</style>
文字が<a id="Bold1">太く</a>なります<br>

    表示結果

    文字が太くなります


    文字を太くしたいときはこれらを使うようにしましょう．


    まとめ

    見出し以外でhタグを使うとユーザーにも検索エンジンにも見にくくなってしまいます．他のタグ，CSSを使いましょう．

    ウェブページ(ブログ)を書きましょう．

    ポートフォリオ書こう

    学部3年生です．
    そろそろ就活の時期です．
    「情報系エンジニア就職はポートフォリオがあるといい」なんてことをよく聞きます．
    私は大学の先輩からそれとなく聞きました．
    ポートフォリオは大切です．
    ポートフォリオを作りましょう．

    fin.

















    は？

    ポートフォリオって結局何なんだ...


    一言でいえば作品集．
    「自分はこれくらいのスキルがありますよ」ってことを企業側に示します．
    具体的にはgithubのリポジトリ等を添付して，自分で書いたコードや作ったプログラムを見てもらいます．
    ざっくり調べた感じ，「簡単な自己紹介・扱ったことがある言語(フレームワーク)・作品へのリンク」なんかを書いておくと良いみたいです．
    ポートフォリオ用のページを作ったり，紙面で提出したり．
    webページ形式で書くので，自分の持てる技術を結集してできるだけおしゃれなページを書きたいですね．
    まだ載せられる物が少ないので，勉強した記録とかもどんどんpushして量増しします．
    どうせSNSも調査されると思うので，潔くTwitterのリンクなんかも自己紹介に貼ります．
    見られて困ることはないのでどうぞフォローしてください．

    少し前に，企業の重要なシステムがgithubでpublicになっていて流出してしまう事件がありました．
    職務で開発したシステムを無断公開すると著作権侵害になるみたいです．
    エンジニアとして転職サービスを利用するつもりだったらしいですが，現在彼はどうしているのでしょうか...
    自分が開発したシステムだからなんでもポートフォリオになるかと言えば，こういった事例もあるんですね．
    他にも個人情報などの問題もあるので，全体公開で何かを発信するときは特に注意しましょう．

    まとめ


    ポートフォリオは自分の作品集
    就活であると便利です
    公開する情報に気をつけましょう

    ブログ活動が活発になるよって話

    はてなブログのアカウントを作って2年半ほどになりますが，

    記事が更新されない

    2年半もやってて記事が4つだけって...
    昨年は大学の講義がオンライン中心で，時間があったにもかかわらず記事の投稿がない．
    創作活動をしていたかというとあまりしていなかった？
    暇なときは1日中Twitter救援でマグナHLとマグナⅡ殴ってました．
    今年度からは，対面授業が再開し，就職活動も始まって行くと思いますが，記事の投稿が活発になる予定です．
    なぜこのタイミングなのか？

    わからない．俺たちは雰囲気でブログを書いている．

    自分の中でプログラムの創作活動が少し活発になっているので，これらの作成後記を書こうと思った次第です．
    他にもやりたいこと，書きたいことがいくつか思い浮かんだので，まったり記事にしていきます．
    webページ周りを少し勉強しているので，ブログのレイアウトなども改修していきたいです．
    作成したプログラムなど技術的な話だけでなく，グラブルやウマ娘などゲームの記事も書く予定です．

    もし見かけたら星ください．
    私が喜びます．

    シフト管理表を作ってみる -googleスプレッドシート-


    バイトで上司に呼び出されました

    塾でバイトをしているため，生徒の成績が下がってしまったとか，何かミスでもしたのかと戦々恐々としながら向かいました．

    まぁなんということもなく，今後の指導方針と，大学の予定からいつシフトに入れるかということでした．

    しかし，話の締めに大きな案件を受けることとなりました．

    「Plain先生，何かシフトの管理するのにいい方法とかないですかね？」

    なぜ，ただのバイトである私にそんな話をされるのかというと，上司以外ほとんどの講師がアルバイトだからなんですね．

    何か案があれば，上手くいかなくても問題はないということでしたので，とりあえず「考えてみます」と返しておきました．

    考える気のないような返事ですが，少し気になるのでやるだけやってみましょう．

    私はエンジニアの卵ですので技術的に解決していきたいと思います．


    仕様・設計

    初心者が始めから何かを作り始めるのはあまりよろしくないので，どのように作っていくのかをまとめてみましょう．

    現状，問題点

    もともと，紙ベースで1か月ごとのシフトを集めて上司が打ち込んでいました．

    配る→集める→打ち込む→まとめる→振り分ける→確認する

    というタスクに分けることができますが，なかなかに大変そうですね（他人事）

    今回は「配る・集める・打ち込む」までを手早く簡単にできるよう作成していきます．

    前提条件

    予算とかないので無料で扱えるサービスで作る

    誰が，何曜日の，どの時間帯に仕事に入ることができるかをわかりやすくまとめるもの

    また，仕事場のグループLINEがあるので，そこから入力・提出できるようにしていきましょう．

    制作手法

    今回はタイトルにあるとおり，Googleスプレッドシートを使ってみようと思います．

    理由としては，

  • 無料であること
  • Googleフォームで収集したデータを扱えること
  • LINEでURLを共有できること
  • 雛形さえ作ってしまえば編集が簡単であること

    • などがあります．


    フォームを作る

    まずは入力元のフォームを作ります．

    誰が，何曜日の，どの時間帯に入れるのかということを入力しやすく，データを扱いやすいようにしていきます．

    f:id:Mr_Plain:20200921150016p:plainf:id:Mr_Plain:20200921150726p:plain

    この日だけは入れないということもあるので，コメントを書けるセクションを用意してもいいですね．

    このフォームを使って回答を収集すると下のような回答シートが作られます．

    f:id:Mr_Plain:20201206235916j:plain


    シートに関数を加える

    このままでは，何曜日のどこに誰が入っているのかわからないのでシートを集計するための関数を加えていきます．

    googleスプレッドシートではQuery関数というものを用いることで，データをSQLのように処理できるようになります．

    参考：【メモ】Google SpreadsheetでSQLが書ける?Query関数が便利な件。


    そして，集計したものが下の表です．

    f:id:Mr_Plain:20201207000745j:plain

    何曜日のどこに誰が入っているのかが一目でわかるようになりました．


    今回使用した関数は次のようなものです．

    =QUERY('シート1'!B2:H,"SELECT B WHERE C like '%A%'")

    回答シートのB2からH（名前から土曜日の入力）を見て，その曜日のコマが含まれる部分に対応した名前を入れていきます．

    回答シートではAコマ，Bコマ，Cコマのように書かれるため，%A%とすることで，文字Aが含まれるマスという条件付けをしています．

    これを曜日とコマに従って，AからSまでの19マス分記述します．


    運用

    うれしいことに作ったフォームは採用されて，実際にシフト管理に使われることとなりました．

    使い始めて3か月がたった現在，問題なく使えています．

    しかし，月ごとに前の月のデータを消去してシートとフォームを使いまわしているため，入力されたものが少しずつ下にずれていくという問題を発見しました．

    上司は気にしていないようなので急いで修正することはしませんが...


    まとめ

    勤務時間中に作成したため事務給がついて，googleスプレッドシートについて勉強もできて一石二鳥でした．

    最後の方で問題も見つかったので，改善策を探していきたいと思っています．

    使いまわさないように，gasを使ってシートとフォームを生成する的なものとかありそうですけど...

    次はgasにでも手を出してみましょうか

    予定は未定

    PythonとWikipediaで遊んでみた

    Wikipediaからランダムで記事を表示させるプログラムを作りたい

    ということで調査した結果，PythonにはWikipediaを扱うモジュールがあるみたいです．

    pypi.org

     

    まずはインストール

    Wikipediaモジュールは標準では搭載されていないので，インストールする必要があります．

    ターミナルやコマンドプロンプトを開き，

    $ pip install wikipedia

    を入力します．あとは適当にプログラムを書いてオワオワリ




    一応使い方書いとくね
    >>>import wikipedia
#これを書かないとwikipediaモジュールは使えない

>>>wikipedia.set_lang('ja')
#表示する言語を日本語に設定 英語だと'en'

>>>wikipedia.summary("")
#""に入力した文字について検索して概要を文字列として生成する

>>>wikipedia.search("")
#""について関連する単語を配列に入れて生成する

    他にもいろいろあるので，一部実行例を紹介

    >>> import wikipedia
>>> wikipedia.set_lang("ja")
>>> wikipedia.summary("python")
'Python（パイソン）は、汎用のプログラミング言語である。コードがシンプルで扱いやすく設計されており、C言語などに比べて、さまざまなプログラムを分かりやすく、少ないコード行数で書けるといった特徴がある。'
>>> wikipedia.search("python")
['Python', 'モンティ・パイソン', 'ピュートーン', 'KML', 'Bazaar', 'Geany', 'Google App Engine', 'キャノピー', 'タプル', 'LAMP (ソフトウェアバンドル)']
>>> wiki = wikipedia.page("python")
>>> wiki.title
'Python'
>>> wiki.url
'https://ja.wikipedia.org/wiki/Python'
>>> wiki.content
'Python（パイソン）は、汎用のプログラミング言語である。コードがシンプルで扱いやすく設計されており、C言語などに比べて、さまざまなプログラムを分かりやすく、少ないコード行数で書けるといった特徴がある。\n\n\n== 概要 ==\n文法を極力単純化してコードの可読性を高め、読みやすく、また書きやすくしてプログラマの作業性とコードの信頼性を高めることを（以下略）'
>>> wiki.links[0]
'.NET Framework'


    単語ガチャ

    短いコードで単語，概要，リンクを生成するプログラムを作成しました．

    import wikipedia
wikipedia.set_lang("ja")
rand = wikipedia.random()
Pg = wikipedia.page(rand)
print(Pg.title)
print(wikipedia.summary(rand))
print(Pg.url)





    今回使ったPythonライブラリはMediaWiki APIというWikipediaのAPIをラップしたものです．これを機にAPIを利用したプログラミングにもチャレンジしていきたいと考えてます．

    はじめはGoogle周りからかなぁ．．．