ニコニコ大百科解析事始め ~提供されるデータをJSONして触る~

# ニコニコ大百科データセットを使う
ニコニコ大百科データセットは IDR で公開されているニコニコ大百科の2008~2014年の記事とその記事へのコメントを集めたデータセットです。

知識抽出をはじめとする自然言語系の研究に向いていますが、Wikipedia のようにおとなしいデータセットではなく、かなり癖のあるデータセットとなっています。

例えばニコニコ大百科にある文は半分近くが主語が欠けている文章となっていますし、必ずしも文体が統一されているわけでもないですし、AAなんかも入っていたりします。

今回はこのデータセットの解析をしてみたいなーと思ってくれる **面白い人** を求めて簡単な前処理のツールとともにデータの中身を紹介していきます。

# 提供されているニコニコ大百科を前処理する
提供されているデータは **ちょっと特殊なCSV** で、適切な前処理を施すことで標準のCSVに変形することが出来ます。
また、HTMLはいくつかのタグが煩くて解析の都合上少し面倒になります。
このため

1. CSVを前処理する
2. ニコニコ大百科の記事(HTML)をJSONに変形する

初めてゲームを作ったので紹介してみる

初めて作ったゲームはノベルゲームでした。宇宙人が地球にせてめくるというコメディです。気になる方は、ぜひ、一度プレイしてみてやってくださいな。30分くらいで終わります。

https://syui.cf/imgame


ゲームの完成は、ブログを見ると`2019-12-29`から`2020-01-04`なので、1週間ほどでした。最終アップデートは`2020-01-08`なので、アップデートを含めて2週間ほどの製作期間でした。

使用したのは`tyranoscript`です。フレームワークの類で、htmlをwin,macアプリの形式にビルドできたりします。素材は、全部自分で作りました。作ったのは、イラスト、背景、キャラクター、シナリオ、BGM、OP・ED曲、システムUIなどでした。

## きっかけ

きっかけは、どこかでノベルゲームを匿名メンバーを集めて作ったという話を聞いて、ちょっとやってみようかなと思ったのがきっかけでした。

それからほんのちょっとシナリオを書い

JavaScriptをWEBサイト（HTMLファイル）に適用する方法

さぁJavaScript自体はなんとなく理解できたぞ、ってなってもそれを実用できないと意味がないですよね。

ターミナルでわちゃわちゃやってるだけでも楽しいけど、やっぱりWEBサイトに適用させた方がもっと面白いはずです。今回は、HTMLファイルにJavaScriptを適用する方法をメモしていきます。

##HTMLファイルにJavaScriptを適用する方法

### 1. HTMLタグの中に入れる

“`html:qiita.html

Hello

“`

この場合は、Bodyがロードされた時にalertが実行されます。CSSもこんな感じでタグに直接適用することができますけど、あんまりやらないですよね。

### 2. HTMLファイルの中にJavaScriptスペースを作る

“`html:qiita.html

Hello

//こちらがJavaScriptスペース

```
2.　オブジェクトの配置

```html






haml-railsでerbファイルをhamlに変換する方法

個人アプリ開発において新しく立ち上げる度に何度も調べてしまうので備忘録として残す。

## 結論
このgemをGemfileに記述

```:Gemfile
gem "haml-rails"
```

bundle installを実行

```:ターミナル
$ bundle install #bundle でも可
```

下記コマンドを実行し、erbファイルをhamlに変換。

```:ターミナル
$ rails haml:erb2haml
```

元のerbファイルを削除するかどうかを聞かれる。不要な場合はyを選択。

```:ターミナル
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
y
Deleting original .erb files.
-----------------------------------------------------------------------

初心者によるプログラミング学習ログ 205日目

# 100日チャレンジの205日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

205日目は

おはようございます
205日目

udemyでwebサイトコーディング
progateでRubyちょこっとやってみた#100DaysOfCode 時は金なり⌚[timer]

はじめまして！記事をご覧くださりありがとうございます。
AI・IoTのプロフェッショナルを目指して修行中をしていましたが、
メンタルぶっ壊れて療養中の、のぶたん改め「びりどら」です。
不健全で未熟なイノシシ＆チンパンジー人格を解消して
人様にご迷惑をおかけしないように成長したいと考えています。

#時は金なり
昔から**「時は金なり」**といいます。
私に不足している感覚意識です。
例えば、人と会話するときも自分の時間を使うだけではなく、
相手の時間も使ってしまいます。(皆さんにとっては、あたりまえにできているでしょうが..
私はその感覚がおろそかで友人も忙しい中、
気づかないうちにご迷惑かけてしまっていました。客観的に見て(おそらく
**会社では納期と予算**というしがらみがあります。
僕は、会社では時間と品質(クオリティ)の観点から
全く、意識できていませんでした。
端的に**生産性が皆無**かもしれません
今回は、そんな**時間はお金に値するほど大切だよ**、ということを**自分の戒め**として、作りました。
ちなみに、脱線しますが、下記イラストは自分の状態をしめしています。

元記事を表示

HTML/CSS学習時役に立った書籍、サイト

#HTML/CSS学習時役に立った書籍、サイト
HTML/CSS学習時役に立った書籍、サイトのを紹介したいと思います。
紹介するもの以外にもたくさん参考にしたものはありましたが、特に参考になったものを紹介します。
最後にどの順番で学習したらいいかまとめるので参考にしてください。

##1. 書籍
###HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

HTML5/CSS3モダンコーディングは三種類のサイトのコーディングを学ぶことができます。　
私は最初と最後のサイトしかやっていませんがとても勉強になりました。
三つ目のサイトコーディングは

動画のサムネイルを取得する方法

今回はiflameを使用した動画の埋め込み方法を紹介します。
また埋め込んだ画像からサムネイルを取得し、メルマガに使用するとクリックされやすいメールを作成できます♪

## 動画IDの取得
まず使用したいyoutubeの動画へアクセスします。
アクセスしたurlの「v=」以降の文字列が動画IDです。

#### 例

の場合、IDは「nUj9iDAM9EY」になります。

## iflameへの埋め込み
iflameを使用し、サイトへ動画を埋め込みます。
今回は私が作成したサイトを例に説明していきます。

https://info.hoshi3.jp/houseMarket
へアクセスします。

F12を押し、開発者ツールを開きます。
その後iflame使用箇所を検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/269bd736-2afb-6522-e01a-3db5be1ddf

Facebookいいね！ボタンのレイアウト崩れ対策（暫定）

この記事はこちらに移行しました。
https://11-30am.com/104/

storybook for htmlがあまりにも使いづらいのでpugを使って上手く利用する方法を考えてみた

storybook for htmlを利用する場合ってvueとか使わないと思うのですが、実制作で**素のHTMLで書くケースなんてほぼ無い**ですよね。pugで書かれる事が多いかと思います。
そんな中でstorybookを利用したい場合【コード補完の利かない環境でHTMLを書く】か【ビルドしてコピペ】、しかも書いたところで**pugとして再利用できる内容ではない**のです。
下手したら仕事が増えるだけでハッキリ言って使えません。検索にも殆ど引っかからない状態です。
かと言ってstorybookを使うためにnuxtを利用するってのも違うと思うので、上手く使う方法を考えてみました。

## 前準備
今回説明する内容はpugの利用方法を説明するだけなので、特別な環境は作りません。
サンプルを作るのが面倒なので初期インストール＋bootstrapのcssを使用して進めます。

npx -p @storybook/cli sb init --type html

インストールしたら、とりあえずこんな感じの構成で準備します。

```
├── .storybook
│ ├── con

buttonタグをクリックした時にlocation.hrefが正常に機能しない問題の原因と解決

私の環境だけだと思うんですが、不可解な現象に出くわしたので備忘録。

# TL:DR 原因と解決
buttonタグはonclickを書いてもsubmitを無効にしないとスクリプトが実行されない。
そのため、``としなければならなかった。

# 経緯と再現
ボタンをクリックするとページジャンプ！をやりたいので、
`location.href='(ジャンプ先)'`を指定。
サクッとサンプルページを作りたいので、ローカルで環境を作ってVivaldi2.10...で実施。
ディレクトリ構造は以下の通り。

```
# tree
.
├── index.html
└── jump.html
```

たとえば、index.htmlからjump.htmlにリンクさせたいケースがあったとする。
aタグで指定した時はjump.htmlにジャンプできているとして、問題は

- ``ならjump.html
- `

`ならin

疑似要素:beforeや:afterのcontentで丸数字（特殊文字）を表示する方法

## 以下の内容を書き換える。
1.「&」→「\」(windowsは「¥」)
2.「#」→「0」（←数字のゼロ）
3. 数字は「10進数」→「16進数」/ 参考→[10進数←→16進数変換プログラム](http://www.gs.niigata-u.ac.jp/~kimlab/hobby/conv-dechex.html)
4. 最後のセミコロン「;」は省略。

```css:①(①)をcontent用に書き換える
① => \02460
```

---
```css:style.css
.maru:before {
content: '\02460';
}
```

```html:index.html

=> ①
```

## 丸数字

元記事を表示

jsで簡単なオーディオプレーヤーを作る

機能

`Javascript`と`jQuery`ライブラリで以下の機能を搭載するオーディオプレーヤーを作った。
・ボタンを押すことで音楽の再生/一時停止、停止
・スライダーを動かしてボリュームの調整
・再生と同時に再生中の楽曲の名称とアーティスト名、再生時間を表示

ファイルの構造としては、`media1/templates`下に`music.html`を配置し、mp3ファイルを`media1/music`下に配置。
まず、`HTML`は以下の通り

```HTML




　　

表示	文字実体参照