はてなブックマーク

完成品 学習の軌跡 秋葉原の遊舎工房で買えます。特に今回は写真右の「自作キーボード設計入門 Endgameへの第一歩」が有用でした。 この記事と同じことをするには、こちらの書籍を購入しましょう。 hifumi keyboard ここから始める自作キーボード meishi Meishi ― The micro macro keyboard kit - たのしい人生 - BOOTH petit split 自作キーボード設計入門(電子版) - Pastry Keyboard - BOOTH https://github.com/foostan/petit_split Soyuz 遊舎工房の実店舗レジに置いてあったのを見て知った ai03-2725/Soyuz: Inexpensive mechanical numpad kit 参照しているライブラリーが参考になる 役に立った記事 自作キーボー

Mint60 とは eucalyn.hatenadiary.jp Mint60 のキーマップ 誤解しがちですが、キーマップは以下の通りです。 印字されているキーと、実際のキーマップが一致していないので注意。 そして重要なことですが、物理的なレイアウトは USキーボード配列がベース となっています。 左の 0 は左シフトキーだし、左スペースのシフトキーキャップはスペースキーです。 Mint60 の設計思想に「キーキャップを楽しめる」があります。 既製品をうまくはめ込むことでバリエーションや品質、価格を実現しているのだと思います。 この記事の主旨 公式の組み立て手順だけではわからないところを、写真を添えて解説します。 自分自身が電子工作初心者であり、そしてこのキットが人気でこれから同じように挑戦する方が多く現れると予想しました。 運良く入手できた者として、人柱となってきましたのでご報告いたしま

事の発端 プライベートなファイル、例えば写真とか音楽ファイルをガサッと整理することがありますよね。 先日、Mac の「写真.app」のライブラリを管理していた NAS の HDD がお逝きになって、なんとか復元したのですね。こんな感じ↓ こんなの見せられたら、もう関係ないの捨てたくなるじゃないですか。 だから、写真ファイルだけ取り出して整理しようと思ったんですね。 ほら、似たようなことをしてる記事がありました。やっぱりやるよね！ Mac の「写真.app」の中のオリジナル写真を取り出す | Ari's Blog そうして中を開いてみたらこの有様ですよ。 ちゃっかり jpg を名乗った ._IMG_0102.jpg(4KB) …あなたどちら様ですか。 「先頭にドットが付いてるやつだけ除外すればいいじゃない」 この様子を見たら普通こう考えますよね。でも実際それどうやるんですか。 ちなみにこうい

https://syon.github.io/works/ ただカードが10個並んでいるだけの、しがないサイト。 きっかけ Ionic Framework 見てたらこんな表現見つけてカッコいいなーと思ったので。 https://ionicframework.com/pwa 作ってみてわかったのは以下。 ブランドロゴがカッコいい ブランドカラーに配慮とした写真チョイス 写真に白い部分が少ない（＝カードに一体感） 擦りガラス表現は画像でやってる 自分のサイトは、色がごちゃごちゃしててダサい。 少なくとも、キャプションのところはグレーに統一などすると少しはマシになるかも。 自分のプロダクトがWebページのキャプチャである限り白い部分は多いのでどうしようもない辛さがある。 Nuxt.jsについて 対象のサイトは GitHub Pages による静的サイトなので、サーバーサイドレンダリング(SSR)

MkDocsとは MkDocs とは、 Markdown をもとにドキュメントサイトを構築する 静的サイトジェネレーターです。 Material for MkDocs とは、 MkDocs のテーマの１つであり、 Google が提唱しているマテリアルデザインを反映したものです。 このテーマが実によくできているので、じわじわと流行ってきているように感じます。 Material for MkDocsはパレットカラーの切替にも対応 特徴 Markdownファイルを放り込めば大体OK！ テーマいろいろ モバイルサイズにも対応 静的サイトに載せられる（アプリサーバ不要） 記事コンテンツの全文検索ができる！ 静的サイトなのに検索ができることに驚きです。ちょっとだけ仕組みを覗き見たところ、 生成コマンド実行時にインデックスらしきファイルを作っていました。 JavaScriptでゴリゴリやっている感じが

Chase https://syon.github.io/chase/ 前置き 最近このブログの投稿は「作りました」みたいなものばかりで、 そのせいか投稿の頻度がとても低下しています。 プログラミングが流行しつつある今、出来上がったものばかりを紹介するのではなく 実際に作っている人が何を考え、どう判断し、行動していくのかの実例をお届けできればと思いました。 それに、改善を重ね続けられるということは、完成がないことでもあります。 実際このリニューアルも実装が進むほどにやりたいことが湧き出し、終わりがみえない状況です。 途中ではありますが、まぁだいたいやりたいことは実装できました。 なので、新年が明けたこのタイミングで一区切りつけようというわけです。 Pocketとは？ こんな説明記事を書いたのでチェックしてみてください。 syon.github.io Chaseとは？ PocketのWebク

モチベーション いろいろ作り続けていると、知識も増えて技術力が上がった気がします。 特にフロントエンド界隈の進化は味方につけるとその恩恵は大きいです。 最近は React や Vue のようにコンポーネント指向で開発がしやすくなっているので、 その便利さを知ってからは悶々と過去作を作り変えたいと思っていました。あとサーバーレス。 最近つくったものや放置していたものを棚卸しして、いま何が不満なのかを述べ、 次期リニューアルに向けての方向性を考えます。 Chase syonx.hatenablog.com Heroku 無料枠で動いているので、スリープ復帰が遅い。 Material-UI が古い。0.16.6。でももうすぐ v1 がリリースされるので待ってる。 バックエンドが Sinatra なんだけど Ruby はあまり使わなくなってしまった。サーバーレス (AWS Lambda・Node.

AWS Lambda で動かしたいやつの途中経過です。 OGPが取得できなかったときのフォールバックに従来の<title>や<meta name="description">を使うことが予定されています。 gist https://gist.github.com/2d1c451790c32edc40e0f916d7c06de5 cheerio https://github.com/cheeriojs/cheerio OGP with cheerio on Node.js (Sample) $ node -v v7.9.0 実行結果 ============================= { site_name: 'INTERNET Watch', title: 'Microsoft、タスク管理アプリ「Microsoft To-Do」のプレビュー版をリリース、Wunderlistの機能を

追記 2018.4.5 この拡張は現在公開が停止されています。 2018年1月頃、Googleによるレビューが行われ、ユーザーデータポリシーに引っかかったためです。 具体的な対応方法がわからず、そのままストアから消えました。 僕は現在も利用を続けていて、開発モードで動作させることができるため困っていないのですが、 もし需要があれば公開を再検討します。 ダウンロード Gaiyas - Chrome ウェブストア 2017.2.11 (v0.0.1) 限定公開（URLを知っている人のみアクセス可能） 外野たち 名前の由来は、将来的に Twitter 上のコメントも表示できたらなと思い、はてブに限定するのを避けてこうしました。 あとはググラビリティ。 まだ改善の余地がたくさんありますので、自分でしばらく使いながら調整を重ねて正式公開しようと考えています。 興味のある方はアルファテスターとしてご参

自分でブログシステムを使ってサイトを構築していると、プレビューするためのローカル実行環境を作ったり、ビルドをする際にエラーに悩まされることがよくあります。今回も、しばらく放置していたブログを久しぶりに更新しようとしたらハマりました。この機会に Docker を活用して環境依存の問題から開放されようと頑張ってみました。 Blog http://blog.nocorica.jp/ Repo https://github.com/syon/nocorica/tree/gh-pages Jekyll 公式 Docker イメージ https://github.com/jekyll/docker https://hub.docker.com/r/jekyll/jekyll/ Dockerfile Dockerfile を見てみると、内部的に jekyll というユーザが /srv/jekyll とい

ホームってなに iOS - ホーム - Apple（日本） こいつです。 アプリ自体の使い方にも四苦八苦しました。 PIN コード読取をカメラでできるようだけど反応せず。手入力で対処 アクセサリをタップするとスイッチONしてしまう iPhone 6s だと 3D Touch の「押し込み」で項目詳細画面 ようす Siri は賢いので、エアコンを「つけて」「オンにして」「けして」「切って」をいい具合に解釈して命令を実行してくれます。 どうやるの Homebridge という iOS HomeKit API をコントロールするサーバを立てて、そのプラグインの１つである homebridge-irkit で IRKit とつなげてエアコンを ON/OFF します。たぶんこんな感じ。 Siri --- HomeKit API --- Homebridge --- homebridge-irkit

TL;DR これから React Router について学ぶならコレがおすすめ！ reactjs/react-router-tutorial はじめに React Routerについて解説をされている日本語記事は、この2つくらいじゃないでしょうか。 2014-12-18 React.jsでserver-side renderingにも対応したRouting - Qiita 2015-02-20 React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ ちなみに、この記事を書いているのは 2016-02-28 です。時が経つのは早いですね。 今回の本旨としては、今ちゃんと学ぶならどうすべきか検討していたら React Community 公式の react-router チュートリアルを見つけたので紹介してみよう、というものになります。初回コミットは 201

Chase syonx.hatenablog.com what for React の基礎をチュートリアルや勉強会で学んで、その先に進めないでいたりしませんか？ きちんと技術を身につけるには、自分の手で何かを実際に作ってみることが効果的です。 React の公式チュートリアルはとてもよくできていると思いますが、 そこからもう一歩先にトライするのに提案したいのが今回ご紹介する内容になります。 制作したアプリの形式は Web アプリで、あとで読むサービスの Pocket と連携します。 先の記事で示したようにモチベーションと目的が重要なのでややニッチな題材となりますが、 試しやすさと簡潔さの点において Twitter よりも扱いやすいと思います。 構成図 技術スタック React Material-UI axios (Ajax) ESLint (airbnb) Gulp Browserify

Chase https://syon-chase.herokuapp.com/ みなさんはあとで読むサービスを使っていますか？ その中でも有名な Pocket というサービスを、公式の API を使って自分なりに使いやすくした Web アプリ『 Chase（チェイス）』を作りましたのでご紹介します。「自分のために作ったものを、みんなにも使ってもらえるようにした」という背景があります。無料です。そして、オープンソースです。 リニューアルしました！（2018年1月） syonx.hatenablog.com ターゲットユーザ例 移動中に Twitter や RSS リーダーなどでキャッチした情報を Pocket に送り、オフィスや自宅の PC でじっくりチェックしていくスタイルの人に適しています。 移り変わりの速い世の中にいかに追いつくか。情報の入手と消化のせめぎ合い… それは Chase 。

google http://www.google.co.jp/ yahoo http://www.yahoo.co.jp/ github https://github.com/ こんな感じでTSVファイルを記述して実行すると、上の画像のようにPNG画像が出力されます。 1列目がPNGファイル名、2列目がURLです。TSVにしたのは、Excelからコピペできるからですね。 ソースコード utils/phantomjs-capture at master · syon/utils 使い方 Node.js 上で動作します。PhantomJSをインストールしてから↓ $ git clone https://github.com/syon/utils.git $ cd utils/phantomjs-capture/ $ npm install $ node index 『PhantomJS』とは？

GeoPatternとは GeoPatternとは、文字列を与えてSVG画像を生成するライブラリです。 与えた文字列はハッシュに変換され、それをもとに幾何学パターン（全16種）や色相、彩度が決定されます。事前に指定することも可能です。 本家RubyGem版の他に、有志による各言語での実装が揃っています（後述）。 生成した画像はCSSのbackground-imageでの利用が想定されています。タイル型の画像を出力するので、それを縦方向・横方向にリピートして表示します。base64 に変換することもできるので便利ですよ。 GeoPattern が使われているWebサイト GeoPatternの制作者はGitHubのスタッフの方です。それもそのはず、GeoPatternはGitHubのWebサイトで利用されているのです。カッコいいですね〜。 GitHub Explore GitHub Show

一部でざわついている iOS 9 のアドブロック界隈を横目に、自分の情報収集ルーチンを効率化しようと RSS の フィードをフィルタリングする Web サービス『 RSSフィードフィルタ 』を作りましたのでご紹介します。 「自分のために作ったものを、みんなにも使ってもらえるようにした」という背景があります。無料です。 RSSフィードフィルタ ※ 現在「サービス試運転中」としています。 機能 実装済み タイトルでキーワードミュート リンク先記事のドメインでミュート ミュートのプレビュー ホッテントリ強化 実装予定 「広告をミュート」を選べば裏で自動判定してミュート URL前方一致でミュート（ライブドアブログとか向け） ミュート対象だけどあまりにも人気のときはミュート解除 すべてミュートして特定のキーワードだけピックアップ ターゲットユーザ例 RSS で情報収集している Feedly, Ree

そんなものはありません。だからつくりました。 2017.7.7 Windows10に対応しました。 Windows 7-10 で動作します。 ダウンロード NewFile 空のファイルを作成します。 NewFile (Alt+N).exe NewFile (Ctrl+Alt+N).exe NewTextFile 空のファイルを作成します。こちらはファイル名に自動で拡張子.txtをくっつけます。サッとメモを書きたいときに便利ですね。 NewTextFile (Alt+T).exe つかいかた exeを実行してタスクトレイに常駐させ、エクスプローラ上でキーボード・ショートカットを押します。 ファイル名の入力ダイアログが表示されるので、入力しOKでファイルが作成されます。 「すべてのプログラム」にある「スタートアップ」フォルダにexeファイルを入れて自動的に起動させるようにしておくと便利です。

Material UI - Material Design React Components Material-UI is a CSS framework and a set of React components that implement Google's Material Design specification. 制作事例 syonx.hatenablog.com Introduction 入手 $ git clone https://github.com/callemall/material-ui.git デモページも React 製 material-ui / docs をビルドしたものがデモページとして公開されている デモページのソースを見てもそれはレンダリング結果 JSX変換 や Browserify を通した後のコンパイルされたコードなので複雑 コンパイル前のソースが手

インストール方法 blog.nocorica.jp 経緯とモチベーション 実は、Atom の日本語化パッケージは他にもあります。Localization というのですが、こちらは世界中のあらゆる言語に対応できるように作られているものの、インストールしてもうまく動作しないことがあります。これに困っている方が多くおられるようでした。また、うまくいっても警告が出てしまい、問題が報告されても改善の様子が見られません。プルリクも放置気味です。 JavaScript にも慣れてきたので、いっちょ自分で作ってみるかとパッケージ作りの世界に飛び込んでみたところ、これがなかなか面白い。調べていくうちにメニューバーだけでなくコンテキストメニューも日本語化できることがわかったり、どのような仕組みで表示制御をしているか、例えばツリービューの上なのかタブの上なのかといった切替の仕組みがわかって面白かったです。 実現

React v0.13.0 感想 身構えるほど難しくないよ 覚えることって実は意外と少ない 雑に言うと、今までDOMの中に直接書いていたことをJS側に寄せただけ、だがそれがいい 準備時以外index.htmlを触っていない → 記述箇所の集約、影響範囲の限定 公式 Getting Started Getting Started | React HTMLに react.js と JSXTransformer.js を読み込んで使う <script type="text/jsx">の中に JSX syntax でスクリプトを書く <script type="text/jsx" src="src/helloworld.js"></script>で外部化 JSX → JS のブラウザ内変換方式ではコンソールに警告が出る You are using the in-browser JSX transf

Material design - YouTube 調査の背景 新しいWebアプリの制作を検討していて、デスクトップからタブレット、モバイルまで 対応しようものなら自分でデザインガイドラインなり考えるのは大変。だからすでに 世の中に出ているものを活用したいなと思っていて、たどり着いたのが去年 Google が 発表したマテリアルデザイン。 便利なやつ Material Icons Guide - Google Design マテリアルデザインで利用されているアイコンの一覧 Material Design Color Palette Generator - Material Palette 2色選ぶとマテリアルデザインのUIに適用したサンプルとカラーパレットを生成してくれる 🎨 Material Design Colors, Color Palette | Material UI マテリア

Sandbox #1 | syon/works モチベーションの背景 DTXMania（上図は派生のDTXHD）という Windows 上で動作するドラムトレーニングソフトウェアがあるんですよ。 DTXMania powered by YAMAHA Silent Session Drums Windows でしか動作しないのがイヤなんです。iPad で動作させたいんです。 あとなんかこう、シンプルでいいんすよ。得点とかいらないんで。 それからレーンも増やしたいし、もっとも欲しいのは「A-B再生機能」、これね。 トレーニングたるもの、苦手区間の反復練習が重要なわけで。 で、この DTX コミュニティは今もそれなりに活発で、今どきの曲のドラム譜面を作ってアップしてる人もいるんですね。 それらの資産をそのままに、エンジンを新しく作って活性化させたいんです。 自作のポイント マルチプラットフォーム

syon (syon) · GitHub そろそろ収穫なの？ 下にspookyとか書いてある。 spooky 《口語》 幽霊のような[出る]; 気味の悪い. ハロウィンだーー！ 緑の頃 田植え日記 しょんくんによる田植えの様子です。

Release 141 · atom/atom You can now change the file's encoding from the status bar or by using Ctrl-Shift-U. （ファイルエンコーディングをステータスバーもしくはCtrl-Shift-Uで切り替えられるようになりました。） 日本語対応とはメニュー表記が日本語になったとかそういうことではなくて、UTF-8 ではない文字化けしてしまう日本語テキストファイルを正しく解釈することができるようになりましたとかそういう意味です。 追記(2015.03.15) 以下、利用シーンをダイジェストでお送りします。 自動判別はしてくれない。 右下の UTF-8 と表示されているところをクリックして正しいエンコーディングを指定 日本語が表示された！しかし折り返しが正しく動作していない。。 サクラエディタで表示

前回の記事 この記事は大変な反響があって驚きました。「初心者にやさしい」という表現から「プログラミングなしでゲームがつくれる」ことを期待していた方が少なくなかったので、すこし申し訳ない気もしました。。でも、ゲームを自分でつくりたい！っていう人はたくさんいるんですね。なんだか嬉しかったです。 そして、今回の記事をしたためている間に Phaser 2.1 がリリースされました。 まだまだ活発に成長しているライブラリなのです。 僕としてはもっと Phaser が流行って欲しいので、今回は「快適なゲーム開発環境を構築する」と題して記事にしました。 Why TypeScript? Phaser は JavaScript ライブラリです。TypeScript は JavaScript での開発を便利にするためのものです。 ここで紹介する内容においての主な利点は以下のとおりです。 コードヒントが利用でき