1 of 19

サンプル集

サブタイトル！！！！！！！！

名字　名前

2 of 19

何かしら

2

3 of 19

タイトルと目次

コード辺

シンプル
2列 (p7)

3️列 (p8)

セクションヘッダー
グラフ読み込み（表グラフ） (p10)

スプレッドシートデータ読み込み (p11)

漫画風強調表示 (p16)

3

4 of 19

Before After

4

5 of 19

コード辺と実行結果

require 'pixela'

require 'awesome_print'

# eg)

# ruby bin/pixela_monthly.rb bicycle 2020-10-01 2020-10-31

# 1 pixela id

# 2 start date

# 3 end date

id = ARGV[0]

from = Date.parse(ARGV[1])

to = Date.parse(ARGV[2])

def main(id, from, to)

client = Pixela::Client.new(username: 'swfz', token: ENV['PIXELA_TOKEN'])

dates = client.graph(id).pixel_dates(from: from, to: to)

sum = dates.sum do |date|

client.graph(id).pixel(date).get['quantity'].to_f

end

p "#{dates.size}回\n総距離: #{sum}km"

end

main(id, from, to)

5

6 of 19

2画面

sample.test.ts

__tests__/index.test.ts

import { setupServer } from 'msw/node'

import { handlers } from '../src/mocks/handler'

import { generateBlocks } from '../src/slack'

import workflowRun from './../src/mocks/responses/workflow_run.json'

describe('slack', () => {

const server = setupServer(...handlers)

beforeEach(() => {

server.listen()

})

afterAll(() => {

server.close()

})

it('generateBlocks', () => {

const workflowName = 'test-workflow'

const blocks = generateBlocks({

...workflowRun,

id: 1,

name: workflowName,

actor: {

...workflowRun.actor,

login: 'octocat'

},

repository: {

...workflowRun.repository,

full_name: 'octocat/octocat',

html_url: 'https://github.com/octocat/octocat'

},

head_branch: 'test-branch',

event: 'test-event',

html_url: 'https://github.com/octocat/octocat/actions/runs/1',

run_number: 1

})

expect(blocks).toHaveLength(2)

expect(blocks[0]?.text?.text).toContain('Workflow: test-workflow')

})

/**

* Unit tests for the action's entrypoint, src/index.ts

*/

import * as main from '../src/main'

// Mock the action's entrypoint

const runMock = jest.spyOn(main, 'run').mockImplementation()

describe.skip('index', () => {

it('calls run when imported', async () => {

// eslint-disable-next-line @typescript-eslint/no-require-imports

require('../src/index')

expect(runMock).toHaveBeenCalled()

})

6

7 of 19

3カラムレイアウト！

markdownlint.yml

.prettierrc.json

slack.test.ts

# Unordered list style

MD004:

style: dash

MD013:

line_length: 120

# Ordered list item prefix

MD029:

style: one

{

"printWidth": 80,

"tabWidth": 2,

"useTabs": false,

"semi": false,

"singleQuote": true,

"quoteProps": "as-needed",

"jsxSingleQuote": false,

"trailingComma": "none",

"bracketSpacing": true,

"bracketSameLine": true,

"arrowParens": "avoid",

"proseWrap": "always",

"htmlWhitespaceSensitivity": "css",

"endOfLine": "lf"

}

import { setupServer } from 'msw/node'

import { handlers } from '../src/mocks/handler'

import { generateBlocks } from '../src/slack'

import workflowRun from './../src/mocks/responses/workflow_run.json'

describe('slack', () => {

const server = setupServer(...handlers)

beforeEach(() => {

server.listen()

})

afterAll(() => {

server.close()

})

it('generateBlocks', () => {

const workflowName = 'test-workflow'

const blocks = generateBlocks({

...workflowRun,

id: 1,

name: workflowName,

actor: {

...workflowRun.actor,

login: 'octocat'

},

repository: {

...workflowRun.repository,

full_name: 'octocat/octocat',

html_url: 'https://github.com/octocat/octocat'

},

head_branch: 'test-branch',

event: 'test-event',

html_url: 'https://github.com/octocat/octocat/actions/runs/1',

run_number: 1

})

expect(blocks).toHaveLength(2)

expect(blocks[0]?.text?.text).toContain('Workflow: test-workflow')

})

7

8 of 19

強調表示！

8

9 of 19

スプレッドシートの表グラフを読み込み

9

10 of 19

スプレッドシートから読み込み

10

	Period 1	Period1.5
Team 1	100	2
Team 2	36	1
Team 3	200	1
Team 4	38	1

11 of 19

Codeなにか

Aやります
Bやります
Cやります
Done!!!
npm install

require 'pixela'

require 'awesome_print'

# eg)

# ruby bin/pixela_monthly.rb bicycle 2020-10-01 2020-10-31

# 1 pixela id

# 2 start date

# 3 end date

id = ARGV[0]

from = Date.parse(ARGV[1])

to = Date.parse(ARGV[2])

def main(id, from, to)

client = Pixela::Client.new(username: 'swfz', token: ENV['PIXELA_TOKEN'])

dates = client.graph(id).pixel_dates(from: from, to: to)

sum = dates.sum do |date|

client.graph(id).pixel(date).get['quantity'].to_f

end

p "#{dates.size}回\n総距離: #{sum}km"

end

main(id, from, to)

11

12 of 19

a

b
c

12

13 of 19

プレースホルダ以外のターミナル風表示

コマンド
b
コマンドと結果

❯ ls

bin/ deploy3.json gatsby-config.ts jest.resolver.js msw-to-v2.diff postcss.config.cjs src/ vrt/

CHANGELOG.md deploy4.json gatsby-node.ts LICENSE node_modules/ public/ static/ wrangler.toml

13

❯ gh pr checks 2508

14 of 19

~/til (git)-[master]* ⇣

❯

14

15 of 19

ツールのサンプル

15

16 of 19

これ

16

17 of 19

特定範囲のハイライト: Highlight(Black), Highlight(White)

17

target

ハイライトしたい箇所に

`target`というテキストの図形を配置

実行(White)

実行(Black)

dummy shape

※TextBoxは網掛け対象外のためテキストボックスへ網掛けしたい場合は塗りつぶし、線を透明にしたダミーのShapeをテキストボックスと同じ範囲で用意する必要がある

18 of 19

漫画風強調表示: Cartoonish Emphasis

18

19 of 19

2023

19