## アップルップルのOSS活動について
有限会社アップルップル 堀 悟大
- OSS活動とは
- 弊社が配布しているオープンソース
- 情報発信
- なぜOSS活動をするのか
- OSSと組み込みJS
## OSS活動とは
### OSS活動とは
だれもが無償で利用出来るソースコードを公開する活動
### 弊社が配布しているオープンソース
- SmartPhoto.js
- hiraku.js
- modal-video.js
- a-table.js
### SmartPhoto.js
## 他のJSとの違い
- 設置が簡単
- イベントが取得できる
- Orieantation APIに対応
- 画像のグループ化ができる
### hiraku.js
両サイドからの開閉
## 他のJSとの違い
- メニュー部分のHTMLをどこに配置してもいい。
- 美しいアニメーション
- アクセシビリティに対応
- ヘッダが固定できる。
### modal-video.js
### modal-video.js
YoutubeやVimeoなどの動画をモーダルウィンドウで再生するためのJS
### a-table.js
### a-table.js
テーブルを編集用のUIに変身させるJS。テーブルのセルなどの情報を取得できる。
- WordPressやJimdo、MovableTypeなど他のCMSでも利用可能
- 静的サイトでも利用可能
## 情報発信
## 情報発信
- npmでの公開
- githubでの公開
- cdnでの公開
- jQuery版、普通のJavaScript版の両方を公開
- 英語ページ・日本語ページを作成
## Github
[https://www.npmjs.com/package/smartphoto](https://www.npmjs.com/package/smartphoto)
## Github
examplesディレクトリーに使い方のdemoを設置
## npm
[https://github.com/appleple/SmartPhoto](https://github.com/appleple/SmartPhoto)
### 自社サイトに掲載
[https://www.appleple.com/blog/javascript/](https://www.appleple.com/blog/javascript/)
### 情報発信
他のJSライブラリとの違いをページの先頭の方でいつも明確に記述するように心がけている。
[https://www.appleple.com/blog/javascript/hiraku-js.html#01](https://www.appleple.com/blog/javascript/hiraku-js.html#01)
### 情報発信
カスタマイズ方法の掲載
[https://www.appleple.com/blog/javascript/hiraku-js.html#03](https://www.appleple.com/blog/javascript/hiraku-js.html#03)
### githubページの作成
[https://appleple.github.io/hiraku/](https://appleple.github.io/hiraku/)
### Echo JSへの宣伝
JavaScriptに関するニュースなどを載せることができる掲示板のようなところ
[http://www.echojs.com/](http://www.echojs.com/)
### ソーシャルでの宣伝
Twitter や Facebook など
## なぜOSS活動をするのか
### なぜOSS活動をするのか
1. CMSに組み込む前に需要があるJSなのかを判断できる
2. ソースを公開して得たフィードバックを組み込みJSに活かせる
3. すでに使われているJSなのでCMSに組み込む際には安定している
4. 集中して一つの機能を開発できる
## 1.CMSに組み込む前に需要があるJSなのかを判断できる
### 実際にあったフィードバック
hiraku.js
- WAI-ARIA周りの調整
- 開閉するボタンのアニメーション
### 実際にあったフィードバック
SmartPhoto.js
- イベントハンドラを組み込んでほしいとの要望
### 実際にあったフィードバック
a-table.js
- ExcellやGoogle Spread Sheetからのセルの貼り付け機能
### 安定したJavaScript
SmartPhoto.jsは組み込みJS化するまでにすでに
36回もバージョンアップされている
### モジュール単位でのJavaScript開発
モジュール単位で開発に集中することで、
バグを減らすことができます
## OSSと組み込みJS
### OSSと組み込みJS
OSで配布しているJSは a-blog cms の組み込みJSに組み込まれます。
### 組み込み済みのJS
- a-table.js
- modal-video.js
## modal-video.js
```html
```
[https://developer.a-blogcms.jp/document/reference/builtinjs/#modal_video](https://developer.a-blogcms.jp/document/reference/builtinjs/#modal_video)
## modal-video.js
[http://chiyo-katsumasa.com/video/](http://chiyo-katsumasa.com/video/)
## a-table.js
ユニット内で利用可能。
js-editable-table-field と指定すれば組み込みJSとしても使用可能
### これから組み込まれる予定のJS
- SmartPhoto.js
### みなさんにいいシステムをお届けできるようにこれからも頑張ります！
# Thank You!
Twitter: @steelydylan
GitHub: steelydylan