ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2018/05/24

GoMocha - テイクアウトの予約システム

スターバックスや多くのカフェやレストランでオンラインによる注文受け付けシステムが出始めています。オンラインで注文し、指定時間になったら引き取りに行くだけです。とても手軽で効率的なシステムです。自分のお店でもそんなシステムを導入したいという方はGoMochaを使ってみましょう。## GoMochaの使い方注文開始です。ま...

List

  • 2018/05/23

Webfonts Generator - SVGからWebFontsを生成

WebFontsはよく使われるようになっています。特にアイコンフォントで便利です。文字サイズさえ指定すれば、大きなサイズでも綺麗に表示されます。しかし作成するのが大変という印象もあります。そこで使ってみたいのがWebfonts Generatorです。なんとSVGからWebFontsを生成します。## Webfonts...

List

  • 2018/05/22

Bug - 閲覧注意!ウィンドウ上に虫を出現

子供の時はなんともなかったのに、大人になったら虫が苦手になったという人はたくさんいます。特に手のひらが敏感になったために、あの手足や体の感触が嫌になるようです。そんな嫌がられる虫たちをWebブラウザに出現させるのがBugです。## Bugの使い方蜘蛛や小バエ(?)が出現し、Webページ上を歩き回ります。!

List

  • 2018/05/20

scrumblr - 自然な移動が可能なカンバン

スクラム開発ではカンバンがよく使われます。イテレーションごとに作業項目をリストアップし、そのステータスを可視化します。そして作業しきれなかったものはバックログに登録され、次のイテレーションに回されます。多くはTrelloのような整然と並んだカンバンですが、今回紹介するscrumblrはよりリアルなものになっています。#...

List

  • 2018/05/19

Facebook Gist Viewer - FacebookでGistをタイムラインに表示

FacebookではリンクのOpenGraphを表示してくれます。しかし、これでは内容が分からないサイトはたくさんあります。その結果として、クリックして外部サイトを表示しなければならず、面倒な思いをすることでしょう。今回はGistのリンクについて、コードをインライン展開してくれるFacebook Gist Viewer...

List

  • 2018/05/18

StackEdit - ブラウザ用WYSIWYGなMarkdownエディタ

個人的に良いと思うMarkdownエディタは、記法の形は残しつつもWYSIWYGに表示が確認できるものです。二ペイン型は使い慣れた方にとってはいいですが、初級者には敷居が高いでしょう。今回紹介するStackEditは二ペイン型ながらも記法がある程度エディタ部にも反映されるMarkdownエディタになります。## Sta...

List

  • 2018/05/17

layerJS - レイヤーを使ったUIコンポーネントフレームワーク

Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパラ...

List

  • 2018/05/16

MediumEditor - Medium風に文字装飾を行う

Markdownを開発者が使うのは問題ないでしょう。今やほぼすべての開発者に対して普及した記法と言えます。しかし、開発者以外の方が使いこなすには、まだ若干問題がある状態です。そこで使ってみたいのがMediumEditorです。Mediumのエディタを模したツールバーです。## MediumEditorの使い方ツールバー...

List

  • 2018/05/15

editableCell - 表計算のようにセル毎に編集/集計

Webの業務システムなど、データを一覧表示する機会は多いです。そうやって表示されたデータに対する要望として、その場で編集したいというニーズが出てきます。もちろん、そう簡単なものではありません。そこで使ってみたいのがeditableCellです。セルごとの編集に加えて、データの集計も行うライブラリです。## editab...

List

  • 2018/05/13

jKanban - Vanilla JSプラグインのカンバン

カンバンは見た目に分かりやすく、機能が限定的です。そのため、かつてのWikiのようにコンセプトを真似したソフトウェアが作られています。フロントエンドエンジニアであれば、一度は作ってみたいと思ったことがあるのではないでしょうか。今回はVanilla JS

List

  • 2018/05/13

Mouthful - Go製のDisqusクローン

世の中の流れとして静的サイトが好まれるようになっています。運用も簡単ですし、セキュリティ上のリスクもごくわずかです。しかし、そうやって作ったサイトにちょっとした動的機能を追加したくなることがあります。その最たるものがコメント機能でしょう。今回はMouthfulを紹介します。## Mouthfulの使い方実際に使っている...

List

  • 2018/05/12

Slate markdown editor - ホットキーが用意されたMarkdownエディタ

Markdownエディタは数多く存在します。多くは二画面形式になっており、左側がエディタ、右側がプレビューになっています。しかし、この場合は編集している内容とその結果の両方を逐次確認しないといけません。Slate markdown editorはそういった手間なく、その場で表示に反映されるので初心者にも分かりやすい仕組...

List

  • 2018/05/11

Mailtrain - node製のMailchimpクローン

お知らせなどをメール配信するサービスとしてMailchimpがよく使われています。しかし、自社データとミックスしたい、一つのサービスにマーケティングの根幹を掴まれるのが怖いなどといった企業もあるでしょう。そこで使ってみたいのがMailtrainです。自前で立てられるニュースレターシステムです。## Mailtrainの...

List

  • 2018/05/10

VuePress - Vueを使った静的サイトジェネレータ

静的Webサイトを生成するツールは多数存在します。多くはHTMLを吐き出すので、それをアップロードします。しかし静的ファイルを使うのでは前時代的なWebサイトと何ら変わりません。そこで使ってみたいのがVuePressです。Vueを使って静的サイトを構築するソフトウェアです。## VuePressの使い方サンプルです。!

List

  • 2018/05/08

YubinBango - 郵便番号検索の決定版

郵便番号検索は多くのWebサイトで実装されています。しかし使い勝手の良いところは限られます。ポップアップが出たり、画面全体を再読込したりするものは、とても使い勝手が良いとは言えません。今回紹介するYubinBangoは郵便番号検索のユーザビリティを極めたソフトウェアです。## YubinBangoの使い方デモです。郵便...

List

  • 2018/05/07

俺の調整さん - 調整さんクローン

元々リクルートが開発し、最近ミクステンドに譲渡されたサービスが調整さんです。何人かで予定を調整するのに便利で、個人的にも愛用しています。そんな調整さんですが、社内では使えなかったり、プライバシーが気になるという人もいるでしょう。そこで使ってみたいのが俺の調整さんです。Herokuでも使える、調整さんクローンです。## ...

List

  • 2018/05/07

はてなブックマーク検索PWA - オフラインでも使えるはてなブックマーク検索

PWA(Progressive Web App)というキーワードに注目が集まっています。Webアプリケーションがオフラインで実行できるようになり、アプリのようにスマートフォンにインストールできるようになる仕組みです。そんなPWAを体感できるWebアプリケーションがはてなブックマーク検索PWAです。はてなブックマークの検...

List

  • 2018/05/06

M5Cloud - IoT開発に。M5用のWeb IDE

IoTでマイコンデバイスが多種多様に存在しますが、一番面倒なのは開発したコードの転送ではないでしょうか。Arduinoは専用のIDEがありますが、Raspberry Pi向けに開発して転送するのは面倒です(SSHで入ってそのまま開発することでしょう)。M5Stackというマイコンデバイスについても同様ですが、こちらはW...

List

  • 2018/05/05

Vivify - 多彩なパターンのCSSアニメーションライブラリ

Webアプリケーションが多機能化するのに合わせてアニメーションは欠かせない要素になってきています。ユーザがボタンを押した時、エラーになった時などアニメーションによってユーザビリティが大幅に変わってきます。そんなユーザ操作の結果などに使いたいCSSアニメーションライブラリがVivifyです。## Vivifyの使い方Vi...

List

  • 2018/05/05

FromJS - Webアプリケーションの理解を容易にするChrome機能拡張

JavaScriptで大型なWebアプリケーションが開発されるのに合わせて、全体を把握するのが困難になってきています。表示されている文字がサーバサイドから出力されているものでない場合、どこで作られたデータなのかを追いかけるのも大変です。そこで使ってみたいのがFromJSです。Webアプリケーションの内容を把握するのに役...