-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
459 lines (428 loc) · 28.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>tanikoのぶろぐ</title>
<script type="text/javascript">
if (location.protocol === 'http:') {
location.replace(location.href.replace(/^http:/, 'https:'));
}
</script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/article.css">
<link rel="stylesheet" href="/css/tag.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script src="/js/share.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71610603-3', 'auto');
ga('send', 'pageview');
</script>
<link href="/feed.atom" rel="alternate" title="atom" type="application/atom+xml">
</head>
<body>
<div id="blog-header">
<div class="container">
<h1 id="blog-title"><a href="/">tanikoのぶろぐ</a></h1>
</div>
</div>
<div class="container">
<div class="row">
<div id="blog-main" class="col-xs-12 col-md-8">
<article>
<span class="article-date">December 13, 2020</span>
<h1 class="article-title"><a href="https://taniko.github.io/article/2020/12/130034">GitHubのPRレビュー依頼をSlackに通知する</a></h1>
<ul class="article-tags">
<li><a href="/tag/TypeScript/1">TypeScript</a></li>
</ul>
<div class="article-contents">
<p>この記事は<a href="https://qiita.com/advent-calendar/2020/dmm">DMMグループ Advent Calendar 2020</a> 13日目の記事です。</p>
<h2>初めに</h2>
<p>プルリクエストのレビュー依頼をSlack上で行っていました。
PRを作成するたびに、Slackで「レビューをお願いします」と書くのが面倒だったので、レビュー依頼を半自動化させました。<br />
BotによるDMもしくは、チャンネルへのメッセージによる通知を行います。</p>
<p>GitHubのPRまたはIssueにラベルをつけるとSlackにメッセージが飛びます。
個人、グループメンションに対応しています。Reviewersにも対応。
リポジトリのHooks設定、YAML設定するだけ。</p>
<p>１年以上前にコードを書きました。TypeScriptの知識も少なかったので、コードが汚いですが、ご了承ください。 </p>
<h2>uzr</h2>
<p>弊社では、GitHub Enterpriseのアカウント名とSlackのアカウント名が同じです。多くの人は、 <code>aratani-yuya</code> みたいに、<code>姓-名</code> の形になっています。<br />
そのため、 GitHubのアカウント名をそのまま使えば、Slackへの通知が可能になっています。もしも違うのであれば、変換の処理を入れる必要がありますが、今回はそれを省きました。<br />
PRのラベルを指定のものにする、もしくはReviewersに誰かを追加すると、レビュー依頼が自動で出されるようになります。</p>
<h3>レビュー依頼設定</h3>
<p>1リポジトリに対して、複数のラベルの設定ができるようになっています。これは複数のチームが同じリポジトリを操作する可能性があるためです。</p>
<pre><code>// setting/pr.yml
owner/repo:
- label: Team-A
channel: team-a-channel
mentions:
- team-a
text: 'お手すきの際にレビューお願いします。'
</code></pre>
<h3>Slack通知の流れ</h3>
<p><img src="/article/2020/12/130034/uzr.png" alt="" /></p>
<ol>
<li>GitHubのWebhookをCloud Functionsに送る</li>
<li>KMSからWebhookのSecret、SlackのTokenを取得</li>
<li>Cloud Storageから設定を取得</li>
<li>Slackにメッセージを送る<ul>
<li>DM</li>
<li>チャンネルへメンション</li>
</ul>
</li>
</ol>
<p>以下のようなメッセージがチャンネル宛、もしくはDMで届きます。</p>
<pre><code>@team-a
お手すきの際にレビューお願いします。
[PRタイトル]
by [User]
https://github.com/owner/repo/pull/1
</code></pre>
<h3>ソースコード</h3>
<pre><code class="language-javascript">exports.uzr = async function(req: Request, res: Response) {
// Pingリクエストのチェック
if (isPingRequest(req)) {
return res.status(200).send('pong');
}
// GitHub WebhookのSecretの取得
const secret = (await decrypt(env('GITHUB_SECRET', ''), KMS_SETTING)).plaintext.toString().trim();
const github_host = env('GITHUB_HOST', '') as string;
// GitHub Enterpriseからのアクセスかを確認
if (!isValidIP(req.ip) || !validate(req, secret, github_host)) {
return res.status(403).send('');
}
// labeled、review_requestedのWebhookかを確認
if (!isAllowRequest(req)) {
res.status(200).send('Not support request');
return;
}
// Webhookのリクエストを判断
const type = detectRequestType(req);
const storage = new Storage();
const bucket = storage.bucket(BUCKET_NAME);
let message: Message | undefined;
try {
// Slackのメッセージを組み立て
if (type === RequestType.REVIEW) {
const data: PullRequest = req.body;
const targets = parseJsonToReviewTargetsByLabel(data.repository.full_name, await getYamlFile(bucket.file(SETTING_FILE_PR)));
message = createMessagesByLabel(targets, data, type);
} else if (type === RequestType.REVIEW_REQUEST) {
const data: ReviewerRequest = req.body;
const users: User[] = await getUsers(bucket.file(USERS_FILE))
const targets = getTargetsBySlackUsers(users, data.requested_reviewer.login);
message = createMessageByReviewer(targets, data, type);
} else if (type === RequestType.ISSUE) {
const data: IssueRequest = req.body;
const targets = parseJsonToReviewTargetsByLabel(data.repository.full_name, await getYamlFile(bucket.file(SETTING_FILE_ISSUE)));
message = createMessagesByLabel(targets, data, type);
} else {
res.status(200).send('Not support request');
return;
}
} catch (e) {
console.log(e.toString());
res.status(500).send('error');
return;
}
if (message != undefined) {
// Slackにメッセージを送信
const groups = await getUserGroups(bucket.file(GROUPS_FILE));
const slack_token = (await decrypt(env('SLACK_TOKEN', ''), KMS_SETTING)).plaintext.toString().trim();
const client = new WebClient(slack_token);
await send(client, message, groups);
}
res.status(200).send('ok');
};
</code></pre>
<h2>終わりに</h2>
<p>主に弊チームで運用されているレビュー依頼半自動化のコードでした。リポジトリは<a href="https://github.com/taniko/uzr_pr">こちら</a><br />
レビュー依頼だけでなく、PRへのコメントの通知も、行えるようにできたらいいなと思います。</p>
<p>明日は <a href="https://qiita.com/yo_chan_yo_chan">yo_chan_yo_chan</a> さんです。</p>
</div>
<div class="article-share">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://taniko.github.io/article/2020/12/130034" data-text="GitHubのPRレビュー依頼をSlackに通知する - tanikoのぶろぐ">Tweet</a>
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en" data-save-url="https://taniko.github.io/article/2020/12/130034"></a>
</div>
</article>
<article>
<span class="article-date">September 20, 2018</span>
<h1 class="article-title"><a href="https://taniko.github.io/article/2018/09/202328">文章生成をやってみる</a></h1>
<div class="article-contents">
<p>文章作成機(?)を作る方法をなるべく簡単(?)に説明したいと思います. とても, 無能なものです. </p>
<h2>はじめに</h2>
<p>どんなものかと簡単に説明すると, 複数の文章を元に, 文章を作成するというものです.<br />
PHPで雑に実装したので, それもどうぞ.
<a href="https://github.com/taniko/udon">https://github.com/taniko/udon</a></p>
<h2>仕組みを雑に</h2>
<p>まずはじめに, 元となるデータを用意します. 簡単にするために, 以下のような文章を用意します. 猫派の方はごめんなさい.</p>
<ol>
<li>私は犬が好きです</li>
<li>私は猫が嫌いです</li>
</ol>
<p>この2文を形態素解析をすると以下のようになったとします. MeCabとか使えばいいと思います.</p>
<ol>
<li>私 は 犬 が 好き です</li>
<li>私 は 猫 が 嫌い です</li>
</ol>
<p>これを1つの状態遷移図で表すと以下のようになります.</p>
<p><img src="/article/2018/09/202328/flow_1.png" alt="" /></p>
<p>この状態遷移図から文章を生成してみます.</p>
<ol>
<li>私は犬が好きです (本来の文章)</li>
<li>私は猫が嫌いです (本来の文章)</li>
<li>私は犬が嫌いです (新たな文章)</li>
<li>私は猫が好きです (新たな文章)</li>
</ol>
<p>新たに2つの文章が得られました. 簡単ですね. そんなわけで, 以上, 文章作成機の仕組みでした.</p>
<h2>もう少し面白く</h2>
<p>仕組み自体は, あまり変わりませんが, 次の状態を現在の状態のみに依存させると面白くなるので, それについての話です. 実装したのはこっち. </p>
<p>以下のような3文があったとします.</p>
<ol>
<li>私 は 犬 が 好き です</li>
<li>私 は 猫 が 嫌い です</li>
<li>私 が し ます</li>
</ol>
<p>これを状態遷移図に書き起こします.
<img src="/article/2018/09/202328/flow_2.png" alt="" /></p>
<p>今までの通りにやると, 以下の5文が生成できます.</p>
<ol>
<li>私は犬が好きです (本来の文章)</li>
<li>私は猫が嫌いです (本来の文章)</li>
<li>私がします (本来の文章)</li>
<li>私は犬が嫌いです (新たな文章)</li>
<li>私は猫が好きです (新たな文章)</li>
</ol>
<p>もし, 次の状態を決めるのが, <code>現在の状態のみに依存</code>するとなると以下のような表と図ができます. </p>
<table>
<thead>
<tr><th align="left">現在の状態</th><th align="left">次の状態</th><th align="left">確率</th></tr>
</thead>
<tbody>
<tr><td align="left">私</td><td align="left">は</td><td align="left">2/3</td></tr>
<tr><td align="left">私</td><td align="left">が</td><td align="left">1/3</td></tr>
<tr><td align="left">は</td><td align="left">犬</td><td align="left">1/2</td></tr>
<tr><td align="left">は</td><td align="left">猫</td><td align="left">1/2</td></tr>
<tr><td align="left">犬</td><td align="left">が</td><td align="left">1/2</td></tr>
<tr><td align="left">猫</td><td align="left">が</td><td align="left">1/2</td></tr>
<tr><td align="left">が</td><td align="left">し</td><td align="left">1/3</td></tr>
<tr><td align="left">が</td><td align="left">好き</td><td align="left">1/3</td></tr>
<tr><td align="left">が</td><td align="left">嫌い</td><td align="left">1/3</td></tr>
<tr><td align="left">し</td><td align="left">ます</td><td align="left">1/1</td></tr>
<tr><td align="left">好き</td><td align="left">です</td><td align="left">1/1</td></tr>
<tr><td align="left">嫌い</td><td align="left">です</td><td align="left">1/1</td></tr>
</tbody>
</table>
<p><img src="/article/2018/09/202328/flow_3.png" alt="" /></p>
<p>こうすることで, 新たに以下のような文が生成できるようになります.</p>
<ul>
<li>私が好きです</li>
<li>私が嫌いです</li>
</ul>
<p>このように, <code>現在の状態のみに依存</code>させると, 新たな文章が作成できるようになりました. 実装するなら, 下の表みたいに, 文の頭に<code>BOS(Begin of Sentence)</code>, 文の終わりに<code>EOS(End of Sentence)</code>などを差し込んで, どの語から始めることができ, どの語で終わることができるのかを明確にした方がいいと思います.</p>
<table>
<thead>
<tr><th align="left">現在の状態</th><th align="left">次の状態</th><th align="left">確率</th></tr>
</thead>
<tbody>
<tr><td align="left">BOS</td><td align="left">私</td><td align="left">3/3</td></tr>
<tr><td align="left">ます</td><td align="left">EOS</td><td align="left">1/1</td></tr>
<tr><td align="left">です</td><td align="left">EOS</td><td align="left">1/1</td></tr>
</tbody>
</table>
<p>ちなみに, 私のツイートから生成された文章はこんな漢字です.</p>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">記号とか品詞とか全く考えずにやるとこんな感じで, ゴミが生成されます. <a href="https://t.co/erAWuavniZ">pic.twitter.com/erAWuavniZ</a></p>— たにこ (@hrgruri) <a href="https://twitter.com/hrgruri/status/1013721468583141376?ref_src=twsrc%5Etfw">2018年7月2日</a></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>おしまい.</p>
<h2>調べると幸せになる用語</h2>
<ul>
<li>MeCab</li>
<li>mecab-ipadic-neologd</li>
<li>マルコフ連鎖</li>
</ul>
<h2>おわりに</h2>
<p>PassCodeの"Tonight/Taking you out"を買いました. ライブDVDがほしかったので. (下の映像は入っていないです.)</p>
<p>PassCode - ONE STEP BEYON
<iframe width="560" height="315" src="https://www.youtube.com/embed/GObrpzFp2lA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
<p>PassCode - Tonight
<iframe width="560" height="315" src="https://www.youtube.com/embed/YzNXj9a6blE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
</div>
<div class="article-share">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://taniko.github.io/article/2018/09/202328" data-text="文章生成をやってみる - tanikoのぶろぐ">Tweet</a>
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en" data-save-url="https://taniko.github.io/article/2018/09/202328"></a>
</div>
</article>
<article>
<span class="article-date">April 22, 2018</span>
<h1 class="article-title"><a href="https://taniko.github.io/article/2018/04/221906">Laravelが 201 Createdを返すってさ</a></h1>
<ul class="article-tags">
<li><a href="/tag/laravel/1">laravel</a></li>
</ul>
<div class="article-contents">
<p>Laravel 5.6での話です. 5.6から, 新たにモデルを作成した際に<code>200 OK</code>ではなく, <code>201 Created</code>を返すようになったってだけの話です. (今更?)</p>
<h2>どういうことか</h2>
<p>LaravelをAPIとして利用していた時に, Eloquentモデルを返した際に, <code>200</code>だったのが, <code>201</code>に変更になりました. </p>
<pre><code class="language-php">// app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use App\Post;
use App\Http\Requests\Post\CreateRequest;
class PostController extends Controller
{
public function create(CreateRequest $request)
{
return $request
->user()
->posts()
->save(Post::make($request->only(['text'])));
}
}
</code></pre>
<p>こんな感じのコードがあった場合, 5.5までだと<code>200 OK</code>で新規に作成されたPostのデータがレスポンスとして, 返ってきていました. しかし, 5.6からは<code>201 Created</code>とPostのデータが返ってくるようになりました.<br />
特に副作用がなさそうですが, テストやライブラリで<code>200</code>かを使っていれば思わぬ動作をしてしまいます. 皆さんは, axiosとかでasync/awaitとかthen/catchとか使っているので大丈夫ですよね. 私はPHPUnitで<code>assertStatus(200)</code>とかしていたのでテストが転けた.</p>
<p>地味な変更点ではあるかと思いますが, せっかく<code>201 Created</code>という, ちゃんと意味があるものがあるので, 嬉しいですね.</p>
<h2>ちなみに</h2>
<p>この話自体はLaravel 5.5の時に出ていて, <a href="https://github.com/laravel/framework/pull/21603">PR</a>も出されていましたが, バグフィックスとかではなく, 破壊的変更であったため, 見送られ, 5.6で<a href="https://github.com/laravel/framework/pull/21625/">PR</a>がマージされました. 仕組み自体はRouterでレスポンス(コントローラでreturnしたもの)が<code>Illuminate\Database\Eloquent\Model</code>で,<code>wasRecentlyCreated</code>が<code>true</code>だったら<code>201 Created</code>で返すって感じです. 詳しくは<a href="https://github.com/mathieutu/framework/blob/f8af1166169d98a12af54aae8ceff87cea55bbbd/src/Illuminate/Routing/Router.php#L704-L705">コード</a>を.</p>
</div>
<div class="article-share">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://taniko.github.io/article/2018/04/221906" data-text="Laravelが 201 Createdを返すってさ - tanikoのぶろぐ">Tweet</a>
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en" data-save-url="https://taniko.github.io/article/2018/04/221906"></a>
</div>
</article>
<article>
<span class="article-date">April 6, 2018</span>
<h1 class="article-title"><a href="https://taniko.github.io/article/2018/04/060522">PHPの面白いところ</a></h1>
<ul class="article-tags">
<li><a href="/tag/php/1">php</a></li>
</ul>
<div class="article-contents">
<p>注意 - 皮肉的な記事です. いくつか使っていて, 辛いところを記述するので, ネタみたいな記事です.</p>
<h2>配列周り</h2>
<p>PHPには, 配列がありまして, <code>$foo = [1, 2, 3]</code>とかです. 前までは<code>$foo = array(1, 2, 3)</code>でした.<br />
そんな配列なのですが, JavaScriptとかRubyとかと違って, arrayであって, array objectではないわけです. そんなわけで, 配列の操作がしたければ, <code>array_*()</code>を使うわけです. <code>array_push()</code>に関しては, <code>$array[] = $val</code>でできます.<br />
そんなPHPの配列で面白いところは, <code>array_map()</code>です. <code>array_push($array, $val_1)</code>, <code>array_filter($array, $callback)</code>, <code>array_reduce($array, $callback)</code>など, 第1引数に配列を持ちます. しかし, <code>array_map()</code>は<code>array_map($callback, $array)</code>と順番が逆なのです. これが辛い. 統一していて欲しい.<br />
PHPの配列が辛い人は, <code>Illuminate\Support\Collection</code>を使ってオブジェクトにすればいいと思うので, <code>composer install illuminate/support</code>しましょう.</p>
<h2>オブジェクトのコピー</h2>
<p>PHPのオブジェクトを別の変数に渡す時, <code>clone</code>を利用します.</p>
<pre><code><?php
class Sample {
public $count = 0;
}
$foo = new Sample();
$bar = clone $foo;
$bar->count++;
var_dump($foo->count); // int(0)
var_dump($bar->count); // int(1)
</code></pre>
<p>もしも<code>clone</code>を使用しないと, 思わぬ副作用を生み出します.</p>
<pre><code class="language-php"><?php
class Sample {
public $count = 0;
}
$foo = new Sample();
$bar = $foo;
$bar->count++;
var_dump($foo->count); // int(1)
var_dump($bar->count); // int(1)
</code></pre>
<p><code>$foo->count</code>も書き換わってしまうんですね. そんな<code>clone</code>ですが, クローンが作成される際に呼ばれるマジックメソッド<code>__clone()</code>というものがあります. これは作成された新たなオブジェクトで呼ばれます.</p>
<pre><code class="language-php"><?php
class Sample {
public $count = 0;
public function __clone() {
$this->count++;
}
}
$foo = new Sample();
$bar = clone $foo;
var_dump($foo->count); // int(0)
var_dump($bar->count); // int(1)
</code></pre>
<p>これにより, 遺伝子操作されたクローンを作ることができます. 使う機会があるかはわかりませんが.</p>
<h2>ついでに</h2>
<p>homebrewでのPHPのインストール方法が変わりました. いままでは<code>brew install php72</code>だったのですが, これからは, <code>brew install [email protected]</code>という形になります. あと, xdebugがインストールされていないようなので, 調べたらpeclを使ってとあったので, <code>pecl install xdebug</code>をしましょう. 詳しくは GitHubのIssueで <a href="https://github.com/Homebrew/homebrew-php/issues/4721">https://github.com/Homebrew/homebrew-php/issues/4721</a></p>
</div>
<div class="article-share">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://taniko.github.io/article/2018/04/060522" data-text="PHPの面白いところ - tanikoのぶろぐ">Tweet</a>
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en" data-save-url="https://taniko.github.io/article/2018/04/060522"></a>
</div>
</article>
<article>
<span class="article-date">March 28, 2018</span>
<h1 class="article-title"><a href="https://taniko.github.io/article/2018/03/280656">Clipasってサイトを作りました</a></h1>
<div class="article-contents">
<p>ただ単に, SNSのアカウントなどのURLをまとめるサービスである<a href="https://clipas.me">Clipas</a>を作りました.</p>
<h2>clipasについて</h2>
<p>どんなサービスかは見てもらう方が早いと思うので私のページのURLを載せておきます.</p>
<p><a href="https://clipas.me/taniko">https://clipas.me/taniko</a></p>
<p>自分に関するURLまとめておくだけのサービスなので, SNS, ホームページ等のURLを載せて, このサービスのURLを他のサービスのURL欄に載せておくだけです. 自分のプロフィールへのリンク, アカウント情報を1箇所にまとめられるので便利.</p>
<h2>作った理由</h2>
<p>Twitter, GitHub, Instagramなどでプロファイル欄にURLを載せられる場所ありますよね？ そこにが何のURLを載せていますか？ どのURLを載せるか悩んでいませんか？<br />
私は TwitterのはGitHubのリンク. GitHub にはホームページのリンクを載せていました. 他にもFlickrやInstagramなどでも様々でした. 1箇所で自分のアカウント一覧を表示してくれるサービスを作りました.</p>
<h2>今後</h2>
<p>clipasに説明欄が足りないなと思ったので, あとで加えようと思います. また, 公式(？)サービス一覧追加のリクエストフォームがあればいいなと. あと, できればユーザアイコンも.</p>
</div>
<div class="article-share">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://taniko.github.io/article/2018/03/280656" data-text="Clipasってサイトを作りました - tanikoのぶろぐ">Tweet</a>
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en" data-save-url="https://taniko.github.io/article/2018/03/280656"></a>
</div>
</article>
<nav class="pager">
<div class="next"><a href="/page/2">next »</a></div>
</nav>
</div>
<div id="blog-side" class="col-xs-12 col-md-4">
<div id="side-profile">
<div class="side-title">プロフィール</div>
<p><img src="https://avatars3.githubusercontent.com/u/10274233?v=3&s=460" width="100px"><br />
<a href="https://twitter.com/hrgruri">@hrgruri</a><br />
主にPHPを触っています.</p>
</div>
<div id="side-links">
<div class="side-title">リンク</div>
<ul>
<li><a href="https://github.com/taniko">GitHub</a><br></li>
<li><a href="https://twitter.com/hrgruri">Twitter</a><br></li>
<li><a href="https://qiita.com/taniko">Qiita</a><br></li>
<li><a href="https://speakerdeck.com/hrgruri">Speaker Deck</a><br></li>
<li><a href="/readme">README</a><br></li>
<li><a href="/repository">リポジトリ説明</a><br></li>
</ul>
</div>
<div id="side-recent" class="hidden-sm-down">
<div class="side-title">最新記事</div>
<ul>
<li><a href="https://taniko.github.io/article/2020/12/130034">GitHubのPRレビュー依頼をSlackに通知する</a><br></li>
<li><a href="https://taniko.github.io/article/2018/09/202328">文章生成をやってみる</a><br></li>
<li><a href="https://taniko.github.io/article/2018/04/221906">Laravelが 201 Createdを返すってさ</a><br></li>
<li><a href="https://taniko.github.io/article/2018/04/060522">PHPの面白いところ</a><br></li>
<li><a href="https://taniko.github.io/article/2018/03/280656">Clipasってサイトを作りました</a><br></li>
</ul>
</div>
<div id="side-tags" class=" hidden-sm-down">
<div class="side-title">タグ</div>
<ul>
<li><a href="/tag/TypeScript/1">TypeScript (1)</a></li>
<li><a href="/tag/api/1">api (1)</a></li>
<li><a href="/tag/conference/1">conference (1)</a></li>
<li><a href="/tag/internship/1">internship (2)</a></li>
<li><a href="/tag/laravel/1">laravel (2)</a></li>
<li><a href="/tag/php/1">php (11)</a></li>
<li><a href="/tag/saori/1">saori (11)</a></li>
<li><a href="/tag/univ/1">univ (3)</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>