2023-03-29

マークダウン記法は便利

便利

プログラミングを勉強してよかったなぁと思うことは多いです。

よかったことの1つとして、「マークダウン記法」を知ったことがあります。

すごく簡単で便利です。

マークダウン記法とは

マークダウン記法を調べてみると「テキストを装飾するための簡単で便利な方法」とあります。

特殊な記号やタグをテキストに挿入することで、見出しやリスト、リンクや画像などの要素を作成できます。HTML や CSS と互換性があり、いろんなプラットフォームやアプリケーションで利用できます。

私は、このはてなブログもマークダウン記法で書いてますし、仕事でBacklogを使っているのですがマークダウン記法で書いてます。

よく使うもの

以下は、私がよく使うものです。

見出し
リスト
コード表示

コード表示はすごく便利で、これを使いたいためにマークダウンを使っているかもしれません。

見出し

行の先頭に「#」と半角スペースを入れると見出しになります。

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

「#」の数で6段階を設定できます。

コード表示

コードを「```」（バッククオート）ではさむとコードをそのまま表示することができます。

print('test')

黒背景でかっこよくコードが表示できます。

基本

その他、よく使うものです。

段落は空行で区切る
改行は行末にスペースを2つ入れる
強調は「*」か「\」で囲む（1つだと斜体、2つだと太字になる）
リンク→ [テキスト](URL)
画像→ ![代替テキスト](URL)
引用は「>」「>>」を文頭に入れる

私はよくリンクと画像方法を忘れてしまいます。

yuuuha.hatenablog.com

2023-03-18

Edge（Bing）の検出とは

便利

Edge の右側に「検出」という項目ができていました。

~~これって、おそらく「GPT-4」ですよね？~~ →「GPT-4」ではなくChatGPTモデルのアップグレード版のようです。

Bingの検出

とりあえず試してみました。

チャット

チャットの項目は ChatGPT のような機能でした。

しかし、WBC の結果や今日の天気など最新の情報も答えてくれたのでバージョンアップされた GPT-4 じゃないかと思います。

Bingの検出

いい感じです。

「チェット」で「検出」のことを聞いてみた

さっそく「チェット」で「検出」を聞いてみました。

Bing の検出とは、Microsoft Edge のサイドバーにある新しい AI 機能です。 Bing の検出は、話題の ChatGPT がベースとなっていますが、検索向けに拡張されています。たとえば、「ChatGPT」はリアルタイムな情報に関しては答えてくれないことがありますが、「Bing」の AI チャット機能ならば答えてくれます。また、「Bing」の応答には出典へのリンクがついています。

リアルタイムにも対応しているとありますね。

ChatGPTは便利ですが、情報が2021年くらいから過去だったと思うのですが、結構不便に感じました。

新しい情報であれば使えますね。

記事作成

私が注目＆驚いたのは「作成」の項目です。

ブログやメールに書きたいテーマ（執筆分野）を入れて「トーン」「形式」「長さ」を入れるとテーマに沿った文章（下書き）を作ってくれます。

Bingの検出

「検出」に以下のようにありました。

Bing の検出では、チャットだけでなく、作成という機能も利用できます。これは AI にお願いしてテキストを書いてもらう機能で、トーンや形式や長さなども選べます。メールやブログだけでなく、エッセイやコードや詩なども作成可能です。

便利です。便利すぎます。

私は「ブログで使える」と思ったのですが、メールなど仕事でもかなり使えますよね。

今後は活用していく予定です。

2023-03-16

Python でリストをソートする

Python AtCoder

AtCoderでリストが必須であることが、やっと理解できてきました。

特に、ソートは基本なのでちゃんと使えるようにしておきたいと思います。

▼リストは以下を使います

L=[22, 5, 55, 76, 13]

sortメソッド

sortメソッドを使ったソートです。

L.sort()
  print(L)
  # [5, 13, 22, 55, 76]

逆順の方法はreverseを入れます。

L.sort(reverse=True)
  print(L)
  # [76, 55, 22, 13, 5]

sorted関数

次は、sorted関数です。

sorted(L)

sorted関数はprintに入れても出力できます。

print(sorted(data))
  # [5, 13, 22, 55, 76]

逆順は第2引数にreverseを入れます。

sorted(data,reverse=True)

アルファベット

sortメソッドでアルファベットも並べることができます。

a = ["b", "c", "a", "e", "d"]

a.sort()

print(a)
# ['a', 'b', 'c', 'd', 'e']

sorted関数

print(sorted(a, reverse=True))
# ['e', 'd', 'c', 'b', 'a']

アルファベットもソートできることをよく忘れてしまい焦ります。

アルゴリズム的思考力が身につく！プログラミングコンテストAtCoder入門

作者:大槻兼資
KADOKAWA

Amazon

独習Python

作者:山田祥寛
翔泳社

Amazon

yuuuha.hatenablog.com

ランキング参加中

プログラミング

2023-03-15

Canvasでアニメーションするための最小テンプレート

Canvas Generative_Art

Canvasを勉強していますが、環境を作るのが難しいです。

いつも「どうだったっけ？」と悩んでしまいます。

特にアニメーションの方法は忘れがちです。

書籍のテンプレート

Canvasを勉強するために書籍を買いました。

Designing Math. 数学とデザインをむすぶプログラミング入門

作者:古堅真彦
ビー・エヌ・エヌ

Amazon

けど、載っているサンプルがかなり難しい。

そのサンプルを理解するために分解してみました。

ベース

まず、アニメーションに必要なベースとなるJavaScriptを確認します。

サンプルにあるマウスクリックやマウスムーブ部分を無しにして作り直しました。

let canvas, ctx

canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d')

var timerId = setInterval(loop, 33)

setIntervalでアニメーション（ループ）させています。

ループ部分

ループ部分は以下となります。

赤の正方形が右に移動するだけのアニメーションです。

function loop() {
    // 背景
    ctx.fillStyle = 'white'
    ctx.fillRect(0, 0, 1280, 1600)

    // 動く正方形
    ctx.fillStyle = 'red'
    ctx.fillRect(x, 100, 30, 30)
    x++
}

背景を先に読み込むことで正方形の動きがわかりやすくなります。

css

cssで画面の真ん中にcanvasが来るようにしています。

マージンはデフォルトのままです。

html,body{
    /* margin: 0 auto; */
    text-align: center;
}

#canvas {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 640px;
    background-color:darkgray;
}

全体

jsの全体は以下となります。

最初にxを定義しています。

let canvas, ctx
let x = 0

canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d')

var timerId = setInterval(loop, 33)

function loop() {
    // 背景
    ctx.fillStyle = 'gray'
    ctx.fillRect(0, 0, 1280, 1600)

    // 動く正方形
    ctx.fillStyle = 'red'
    ctx.fillRect(x, 100, 30, 30)
    x++
}