KazIgu SandBox

作るぜー

CSSの画像エフェクト

SandBox

photoshopとかで乗算とかの効果が入っててふざけんなと思うこと、フロントエンドならあるあるですよね。 そのイライラ、解決されます。そう、IE以外のモダンブラウザならね サンプル(hoverで効果かかります) mix-blend-mode cssにはmix-blend-modeとかいうプロパティがあります。 持てる値としてはnormal,multiply,screen…めんどくさいのでggr とりあえずサンプル用意しました。 コード 必要な部分はこんな感じ html <div class="item"><img src="hoge"></div> .item { display: inline-block; position: relative; } .item:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; mix-blend-mode: overlay; background: radial-gradient(200px circle at 30% 10%, orange, rgba(255,255,255,0)), radial-gradient(300px circle at 80% 60%, red, rgba(255,255,255,0)); } .item img { width: 100%; } 画像同士を混ぜたりとか色味変えたりとかテキストに使ったり可能性は無限大! 個人的にはgifアニと混ぜるとかが好きだけどサンプルにはライセンスとかの問題で拾ったののっけにくいから個人で試してくださいな IEでは動きません。IEでは動きません。 どうでもいいことですが2回言っときました。

Akiyamarkdownをelectronで作ってみた

Others

以前Akiyamarkdownで紹介したSublime TextのpluginであるAkiyamarkdownをElectronのアプリにしてみた ダウンロードはこちらからどうぞ 改めてAkiyamarkdownとは 弊社saib studio代表秋山の手癖によって誕生したメモ書きの記法である。 これといった利点は特に無い。 なにができるの? 秋山曰く 別になにもできないよ! 秋山がメモ書きしやすくなるだけだよ! 今後この記法をベースに、リアルタイムにツリー図が作成されるツールを開発予定だよ! とのこと リアルタイムにツリー図が作成されるツールを開発予定だと・・・? どうせ作るの俺なのに 結局なんなの? なんなんだろう・・・ インデントは全角スペースだし→やら・やら■のオンパレードです ただ意外と議事録取りやすい markdownより優しい ちなみにakiyamarkdownからmarkdownに変換する機能も付けました 実装にあたって githubはこちら 実装に使ったものはざっくり2つ Electron Ace Electron 言わずと知れたnodeとhtml5でいい感じにデスクトップアプリが作れるgithub製のツール Babelとかで書くのが流行ってる気配だけど気にせずcoffeeで実装した ハマったポイントはコピペ周り ローカルでelectron .で起動した際にはコピーもペーストも効くのにbuildしたら効かないという ググってみたら自分で実装しろとのこと Clipboard = require 'clipboard' copy = () -> id = ID editor = ace.edit("editor#{id}") texts = editor.getSelectedText() Clipboard.writeText texts cut = () -> id = ID editor = ace.edit("editor#{id}") texts = editor.getSelectedText() target = editor.selection.getRange() editor.session.remove target

簡単にテンプレートを作成するmytemplate.jsを作って公開してみた

Others

新しいプロジェクトを作成する度にフロントエンドの環境とかコピペしまくっている自分に気付いた。 yeomanとかでgeneratorとか作ってみようかと思ったけどそれもめんどい。 そもそもyeoman大嫌い そこで簡単にテンプレートを登録・利用出来るコマンドラインツール作ってみた Feature ざっくり以下の様なことが出来る 今いるディレクトリの中身を特定の名前を付けてテンプレートに登録 登録したテンプレートを好きな名前で利用 登録したテンプレートの一覧表示 不要になったテンプレートを削除 Install npm install -g mytemplate Usage まずはテンプレート化したいディレクトリに移動 仮にmy-web-starter-kitとか作ってたやつをwskとかで登録するとしよう cd my-web-starter-kit mytemplate add wsk これでmy-web-starter-kitの中身をwskとして登録完了 mytemplate list > wsk みたいになってたらいい感じ 利用するときは mytemplate new wsk projectA 実装してみて まだパフォーマンス悪いから改善しなくちゃ あとcommanderがとても便利だった。 おすすめです。 とりあえず個人用で作成したので諸々保証しかねますが好きに使ってみてください。 issueやプルリクも大歓迎です。 githubはこちら

hubot-slackでのメンション

Others

アダプタがv2からv3に変わってメンション周りが変更されて面倒だったのでメモ ユーザー名からメンション これはとても簡単 ユーザー名がhogeとかなら<@hoge>でいい でもusernameがhoge.fooとかだとちゃんとメンション効かない そういう時はidでメンション送らせるのがいいと思う idからメンション <@>はidを渡しても使えるっぽい slackbotのidはUSLACKBOTらしいのでそれを例にすると<@USLACKBOT>みたいな感じ でもidは普段見えないから取得しなきゃいけない ユーザーの情報はrobot.brain.data.usersに入ってるので Users = robot.brain.data.users for key of Users if 'hoge.foo' == Users[key].name return Users[key].id とかすればユーザー名からidを取得できる そいつを使って Users = robot.brain.data.users getUserId = (name) -> for key of Users if name == Users[key].name return Users[key].id こんなの用意して<@#{getUserId(hoge.foo)}>とかするといい Utilにしとこう どうせメンションとかよく使うので僕は./scripts内にこんな感じファイルをutil.coffeeとか名前付けて用意してる ensureImageExtension = (url) -> ext = url.split('.').pop() if /(png|jpe?g|gif)/i.test(ext) url else "#{url}#.png" Robot = (robot) -> Util = {} Users = robot.brain.data.users delete Users.USLACKBOT

CSSでスライダー

SandBox

ネタがないので実用性ないけどcssでスライダー実装してみた サンプル めんどくさいので 以下略 気が向いたらちゃんと書く

CSSでのParallax

SandBox

LPの作成時などにパララックスがどーのとかが増えている。 jsを使って実装することが多いのだがスクロールでのイベントになるのでパフォーマンス意識しだすと案外めんどくさい。 しかもパララックスの時ってデザイナーがこだわって調整することが多いからプラグインだと不便なこともしばしば でもラクに実装したい!! サンプル cssでパララックス!! ただ単に奥行きが欲しいだけならperspectiveとtranslateZを使うことでcssでも実現出来ます。 IE8??知りません。 IE10からなら動くはずです。 とりあえずサンプル用意しました。 コード 必要な部分はこんな感じ html <div class="container"> <div class="layer01">レイヤー 1</div> <div class="layer02">レイヤー 2</div> <div class="layer03">レイヤー 3</div> <div class="layer04">レイヤー 4</div> </div> .container { perspective: 100px; height: 100vh; overflow-x: hidden; overflow-y: scroll; } .layer01 { transform: translateZ(-100px); } .layer02 { transform: translateZ(-50px); } .layer03 { transform: translateZ(0); } .layer04 { transform: translateZ(50px); } サイズも距離に応じて変わるけどそれが嫌ならscaleで調整するといい感じになりります。 パフォーマンスもいいし階層増やせまくれるし横スクロールでもちゃんとなるからオススメ

Akiyamarkdown

Others

世の中には議事録というものが存在するらしい(僕は苦手) 多くの人はmarkdownを使って書いているらしい かくいうこのブログもmarkdownだ しかしそれにロマンがあるか!?いやない!!! てわけで弊社(saib studio)代表 秋山くんのためにAkiyamarkdownを用意してみた。 Akiyamarkdownとは 僕の愛用エディタSublime Textのpluginである。Package Controlには載っていない。 あの秋山直樹の手癖をそのまま使いやすく、見やすくすることを目的としている。 めんどくさくなったので githubはこちら

自己紹介

Others

saib studioでエンジニアをやっています。 主にフロントエンド。 好きな言語はpython, golang, node, ruby 聖飢魔IIが好きです。 Five Finger Death Punchも好きです。