はてなブックマーク

Riot.js Advent Calendar の22日目の記事です。 石原と申します。フリーランスでWebやアプリのデザインと、フロントエンド周りの実装をしております。 この記事ではRiot.js を作って期間選択のUIを実装する流れを書いてみようと思います。 作るものコードはこのページに全部書くと見難そうなので下記のリポジトリに上げています。 demo https://is8r.github.io/riot-period/ github https://github.com/is8r/riot-periodRiot.js以外の使ったライブラリRiot.jsの良さを活用してさらっと簡単なコンポーネントを作ってみようと思ったので、.tagファイル以外のコードは極力省きたくていくつか他のライブラリも使っています Bootstrap4Moment.jsPikaday上記の3つもそうですが、Ri

ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装 面白そうだったの買ってみました。まだ途中ですが初めて掲示板のCGIを触ったときのようなワクワク感があります。 Pythonの環境でさっそく躓いたのでメモ。 普段Rubyの案件をちょこちょこやっているので既にHomebrewやrbenvが入っている環境が手元にあって、Pythonの知識は0という状態からのスタートである事を先に書いておきます。 pyenvを入れる自分のPCにはOSX Sierraが入っているのですが、入っていたPythonのバージョンは2.7.10でした。書籍のサンプルはバージョン3で動くとの事なので、まずはバージョン3を入れます。 そのままglobalのディレクトリにインストールしても良いのですが、rubyを触る時にはrbenvでバージョンを切り替えて管理していて、それが非常に便利な

for(int i = 0; i < transform.childCount; i++){ GameObject obj = transform.GetChild (i).gameObject; }

リンクさん どんなサイト？インターネット黎明期によく見かけたリンク集の文化が好きで昔からいろいろ見てたんだけど、最近あまり見かけなくなってしまったような気がして寂しいので簡単に作れるようなサービスを作ってみました。 使える機能ログイン不要で新規作成、編集が可能気軽に使えるサービスにしたかったので、ログイン不要で新規作成、編集が可能です。 作成したURLは乱数になっているので誰かに教えない限りは隠蔽されているという状態になっています。 （認証はかかっていないので**公開URLを知る人からは全てアクセスができます**） ログイン機能自体が無いので閲覧している人も編集してリンクを追加したりできるようになっています。 自動タイトル入力機能<figure> <span> <img src="0.png" alt="" decoding="async" /> </span> </figure> リンク

今年はアプリのデザインのお仕事をいただく事が多かったのでちょっと前まで**@3x画像**の書出しなどに追われる日々でした。 デザインデータから各種デバイス用の解像度の画像を切り出す場合、 Photoshopだとレイヤーグループに名前をつけておいて Slicy で書出しているのですが、 Sketchだと例えば一つのレイヤーから**@2x画像とxhdpi画像**みたいな同じ大きさで別々の名前の画像が切り出せるのが便利でした。 やりかたも簡単でExportの設定をレイヤーグループ毎に複数の書出したい画像のサイズとプレフィクスなどを設定しておけば、最後にボタン一つで書出せるようになっています。 各種解像度用の画像を書出す時の設定が沢山あって覚えきれないので忘れないようにメモしておきます。 書出したい画像 タブ用の画像という想定で**30x30**のアイコンを作って書出してみます。 対応したいデバイ

今Unityで作りかけているゲームで、TwitterとFacebookで得点をつぶやける機能を追加したかったのでネイティブプラグインを作ってみました。 GitHubに「SocialPost」という名前で公開していて、ソースコード一式を上げています。 unity-SocialPostPlugin Twitterにつぶやきたい時は

IE9以下では1ファイル中のセレクタの数が**4,096個以上**になるとcssが正しく表示されない問題があります。 僕は普段Windowsの検証ではWindows7のIE10の開発者ツールを使用しているのですが、IE10の開発者ツールのIE9,IE8では前述のセレクタ問題が発生しないので、それだけの確認に毎度VMWareを立ち上げなおす手間があって面倒なので、セレクタ数を数えられるChromeのエクステンションを作ってみました。 といってもまだ色々なパターンのCSSで検証できたわけでは無いので、正確な数の保証は出来ないです。 ただ大きくは違わないはずなので目安くらいにはなるかと思います。 使い方インストールこちらのリポジトリからダウンロードできます。 Google Chrome Extension - Selector Counter Chromeを開いて、 ウィンドウ拡張機能パッケージ

商品写真やプロフィール写真などの一覧ページで、DBから引っ張ってきた縦長横長どちらかわからない画像を全て同じ矩形内にピッタリ表示を揃えたい場合、案外面倒ですよね・・・ 最近これが必要な案件が立て続けにあったので後々楽できるようにjQueryプラグインにしておきました。 異なる画角の画像を均等なサイズで表示させる方法バラバラのサイズの画像をとある矩形の横幅いっぱいに揃えて表示する場合、max-widthで横幅と、あとheight: autoを指定しておくのが一番手っ取り早いのですが、想定外の横長の画像とかが入って来ると下に余白ができてしまいます。 静的なページではある程度画像サイズを均一にしておくなどしていくらでも対応可能なのですが、動的なページ制作の場合では、バラバラの画角の画像が入ってくる事も想定されるので、思った通りの表示にならない事が多いです。 なのでCSSで綺麗に表示を整えようと思

cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。 しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。 手順やり方は下記の4つの指定をすれば良いだけです。 破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し

このブログは Markdown on Save Improved プラグインを使用して、 Markdown記法 で記事を投稿できるように設定しています。 Markdownって便利だけど要素に個別のクラスを割り当てたりできないので個別のデザインを割り当てたりページ内リンクとかがつけにくいですよね。 MarkdownにHTMLタグを記載すれば認識してくれるのでそのまま書けばいいじゃんて話だとは思うのですが、入れ子にしてしまうとタグの中ではMarkdown記法が認識されなくなってしまいます。 なので、Markdown記法の恩恵をうけつつある程度レイアウトも柔軟に行えるような方法をいくつかまとめてみました。 画像とテキストを左右にフロートさせる配置する要素の横幅を広げる注釈を見やすくするページ内リンクを使う外部リンクは_blankで、ページ内リンクはスムーズにスクロールするようにするる 画像を左右

/ Yu Ishihara / Freelance / UI Design, Front-end web development, Unity / Blog / GitHub / X