Visual Studio Codeは0.5.0のときにインストールして使ってみてしばらく様子見だなあって思ってあまりまじめに使っていなかったのですが、オープンソース化されたので一念発起してv0.10.1までアップグレードしてまじめに使うことにしました。 その際にショートカット一覧の日本語翻訳とかないかな？ってふと疑問に思ったらQiita上にありました。 VS Code キーボードショートカット一覧 （オススメ付き） ただ、Windows版(Linux版)とMac版の違いが割とかなりあるのでMac版まとめました。 ちなみにidには当然ながら違いはありませんでした。 eluestkさんの日本語訳を参考にさせていただいたので感謝です。 ほぼまるパクりです。ありがとうございました。 2つ以上のOSで使う人が両方参考した人が混乱しないようにというのもあります。 めんどくさいとかではないです また、

登録不要！actionを変更するだけでメールフォームが送信できるサービス「Formspree」 メールフォームをサイトに設置する場合、PHPで一から作ったり、ダウンロードしてきたものを設定したりと、多くの工数をかけて作ることになります。 またPHPの使えないレンタルサーバーでは、レンタルフォームを利用することもあると思いますが、カスタマイズの幅が小さく、希望のデザインにできないことが多いです。 そこでご紹介したいのが「Formspree」です。 これは、formタグのactionの値を変更するだけでメールフォームを送信できるサービス。しかも、月1000通までは無料で使えます。面倒な登録もいりません。 使い方 １、フォームのセットアップ 今使っているフォームのactionの値を下記のように設定します。 your@email.comの部分は、フォームの送信先にしたいメールアドレスにします。 h

この記事は本家サイトに移転しました。

こんにちは、tamaoki (@t0shiya) です。 今回は、静的サイトジェネレータ Hugo の テーマ（theme）ついて。 Hugoでは、WordPressや他のCMS、ブログと同じようにテーマを利用してデザインを変更できます。 また、自分で作成したレイアウトテンプレートや画像等をテーマとして纏めておくことで、コンテンツを変更することなくサイトのデザインを変更できるようになります。 Hugoにはデフォルトのテーマがありませんので、新規サイト作成時にはお好みのテーマを選択して適用してください。テーマの適用後もデザインは自由にカスタマイズ可能です。 インストール Hugo themes というサイトにコミュニティで作られたテーマが多数公開されています。 各テーマは GitHub で公開されていますので、以下のように git コマンドでインストールしてください。「gitって何？」という

JavascriptはES6以前、ES6(ECMAScript2015)で書き方が違うので、Electronを紹介するサイトによって結構差異があります。サーバーサイドばかりでこのあたり詳しくなく、どっちが新しいの？と混乱しながらサンプルを作っていました。。。 また、Reactも頻繁に新しい機能が追加されるので、ReactDOMを使わずに書いてる古い形式も混在してたりカオスな状態です。なので現時点(2015/02/24)で、調べた限りで新しいスタイルで記述してみました フロントエンド技術に詳しくないため、間違った記述等あればプルリク・コメントお待ちしています！ リポジトリ : https://github.com/kegamin/electron_test アプリの機能 HelloWorld的な機能のみです. Reactを使った画面表示 ボタンクリックを認識して、コンソールログにクリックカウ

おれはHTML5 Boilerplate(ボイラープレート)を使い始めるぞ！ジョジョーッ！！ 2012.11.20 | この方法お勧めです！ ほらみんなも！ | レスポンシブ ども、パープル・ヘイズのフィギュア買うかどうかどうしようかなあ。と悩み中のパープルです。表題でも叫ばしていただきました通り、今日はHTML5でサイトを構築していくためのベスト・プラクティスと言われているHTML5 Boilerplate(ボイラープレート)についてのお話です。知っている人は知っていますし、すでに使い初めているでしょう。というかこれを使わないと話にならないよ。ぐらいの感じかもしれません。 転換期を迎えたっぽいWEB制作環境 なにやら昨今は、インブラウザデザインや、Sassにless、フレームワークにパッケージ、レスポンシブでモバイルファーストで、プログレッシブ・エンハンスメントですから、WEBサイト構築

💿 Listen Everywhere: https://bgmc.lnk.to/KtN9GcqC _____________________________________________ 🔔 Please Subscribe! → https://www.youtube.com/@bgmchannelbgm 💿 Listen on Spotify, Apple Music, YouTube Music, and more → BGM channel: https://lnk.to/TZWnnMjq 📝 Use the BGMC → Music for Stores: https://bgmc-station.com/en/ → Music for Videos: https://bgmc-library.com/ _____________________________

先日、React+Redux入門 - Qiita という記事を書きました。さて、React+Reduxと同じように流行っているイケているフレームワークと言えば、Electronですよね。Electron + React + Reduxのボイラープレートを作ってみましたので、今日はその解説をいたします。 erukiti/tpl-electron-react-redux: Electron + React + Redux のボイラープレート 内容 Visual Studio Codeでなるべくいい感じに開発出来るように目指したもので、内容としては単純なカウントアップのサンプルコードになっています。Electronの弱点である配布ファイルがでかくなりすぎる問題の対応のためファイル結合をwebpackで行っています。webpackではSassやJSONなど様々なファイルを結合することができます。

reactjsでwebアプリを作成するにあたって、とても参考になりそうなreact-webpack-nodeというBoilerplateを見つけたので、中身を見てみる。 構成は、 React + Redux Express MongoDB + mongoose となっており、フルスタック。 jsのmodule bundlerはwebpackで、hot reloadにもserver side renderingにも対応。 ログインのサンプル実装まである上に、herokuへのdeploy手順まで記載されているので、 reactjsで何か作りたい時はこれを土台に単に機能を乗せていくだけで良い感が... まずは勉強がてらcommitされているファイルを軽めにみていく。 package.jsonをみてみる scriptsは、 "scripts": { "clean": "rimraf public"

TOML は、GitHub の中の人が提案した、設定ファイルを記述するための小さな言語である。明瞭な文法なため、人間が読みやすい。また、TOML はハッシュテーブルに明確にマップするように設計されているので、様々な言語でのデータ構造へパースしやすい。 また、Vim で有名な NeoBundle が TOML パーサを搭載したことや、勢いづいている Go でのサポートも熱いことから、すごく伸びそうなフォーマットである。 TOMLノススメ 【個人メモ】設定ファイルフォーマットにはTOMLがいいのかも NeoBundleのプラグイン管理をTOMLに任せてvimrcをスッキリさせる GoとTOML 仕様 TOML の仕様は単純だ。 大文字小文字を区別する UTF-8 である必要がある ホワイトスペースとは tab (0x09) と space (0x20) のみ 改行とは LF (0x0A) と

Library A collection of example HTML forms with code that you can edit and download or copy/paste.

Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには：Gruntで始めるWeb開発爆速自動化入門（3）（1/2 ページ） JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）などを紹介していく連載。今回は、既存のプラグインを使用せず、独自タスクを定義したり、独自プラグインを作成してnpmモジュールとして公開したりする方法を紹介します。

Gruntを使用する際に必要な技術 Gruntのインストールの前に、Gruntに関連する技術を簡単に解説します。 Node.jsとは 先ほども言ったように、GruntはNode.js上で動作します。Node.jsはGoogle ChromeのJavaScript実行環境（V8）をベースに構築されたサーバーサイドJavaScriptのプラットフォームです。JavaScriptを使用してイベント駆動でノンブロッキングIOモデルのアプリケーションを開発できます。

はじめに 僕はWebフロントエンドはほぼやってないんだけど、Firefox OSとかもアレだって事でソレ系にも手を出すかとあれこれやってたらまぁWebのフロントエンド周りのツールが何か色々あってよくわかんねーしどうしよっかなと思ってた所Yeoman辺りが大分良さそうなんじゃないか程度にはわかって来たので手を出してみた次第。 Yeomanってなに Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。 ワークフローとしてはこうらしい yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テストをするという事だそうで。volo

ドワンゴデザイナーが運営しているクリエイターズブログです。フロントエンジニアリングやデザイン、ドワンゴのサービスについて記事を掲載しています。

Captcha security check arafudo.com is for sale Please prove you're not a robot View Price Processing

これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や

Material-UIはReact向けのUIコンポーネントキットです。 BootstarpのGridシステム抜きといったイメージです。 例 ボタン 次のボタンを表示します。 jsx 公式サンプルではES2015のimport文を使っています。 import getMuiTheme from 'material-ui/styles/getMuiTheme'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import MyAwesomeReactComponent from './MyAwesomeReactComponent';

GruntやらGulpやらReactやらですっかりJavaScriptづいているので、Middlemanの代わりに何かNode.js系の静的サイトジェネレータがないか物色。 Slimに似ていてタイプ量が少なそうなJadeを使いたい CSSとJavaScriptのビルドは自前でも可能なので機能としては必要ない タスクランナーと併用したり、外部のパッケージを噛ませたりできる汎用性があるとよい。HTML関係以外はgulp+npmでできるので、HTMLのあれやこれやができて軽いほうが良い、といったところが選ぶ基準です。 // 想像上の構成 var gulp = require('gulp'); var xxx = require('xxx');//HTMLのテンプレやパスを処理してくれるパッケージ!!! var prettify = require('gulp-prettify');//納品ファイ

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 HUGO https://gohugo.io/ どもです。 海外旅行は実は今ではないかと企んでいる今日この頃の私です。 前回に続き、爆速続きで申し訳ないなのですが、「HUGO」が快適すぎる。 作業するにあたって、コンパイルなどやはり何かと早いのがいいですね。 そう、嫌われないぐらいにね。 というわけで、今回は所謂、静的サイトジェネレータに関してです。 HUGOて何？ HUGOは、プログラミング言語Goを使って開発された静的サイトジェネレーターとなります。 静的サイトジェネレーターはRuby 言語で作られた「jekyll」が有名かと思いますが、それと同類なのですが「HUGO」は構造のシンプルさと処理速度の速さで知られています。 jekyll https://github.c

Visual Studio Codeの使い方、基本の「キ」：特集：Visual Studio Code早分かりガイド（5/6 ページ）

Visual Studio Codeのおすすめ拡張機能：特集：Visual Studio Code早分かりガイド（3/3 ページ） Visual Studio Code Settings Sync Visual Studio Code Settings Sync拡張機能は複数のPCでVS Codeを使用している場合に、PC間でVS Codeの設定の同期を取るものだ。実際に利用するにはGitHubのアカウントが必要になる。 同期されるのは以下のものだ。 ユーザー設定（settings.jsonファイル） キーバインディング設定（keybindings.jsonファイル） 起動設定（launch.jsonファイル） ロケール設定（locale.jsonファイル） スニペット 拡張機能 上に示したファイルについては、ユーザー固有の設定フォルダ（Windowsであれば通常は「C:\Users\ユー

Skip to content🚀 Influence MUI's 2024 roadmap! Participate in the latest Developer Survey →

ここ数年「スタティック(静的)サイトジェネレータ」と呼ばれるツールが一部で人気です。Webサイトを構成するHTMLやCSS、JavaScriptなどのファイルを静的ファイルとして生成するツールです。 たくさんのツールが発表されていますが、スタティックサイトジェネレータの比較サイト「StaticGen」を見ると、流行のきっかけとなったJekyll(ジキル)やMiddleman、Hugoといったツールが人気のようです。 今回は、このスタティックサイトジェネレータの流行の経緯や、Webサイトの静的サイト生成のメリットについて解説します。 エンジニアから始まったスタティックサイトジェネレータブーム ツールによっていろいろと差がありますが、スタティックサイトジェネレータは基本的にはコマンドライン(CLI)で動作するようになっており、記事コンテンツはMarkdownなどの記法でエディタを使って記述し、

※記事を読んで、もっといい方法があったら、救ってください（切実） いま触ってみている静的HTMLジェネレータ jekyll -Rubyでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる静的htmlジェネレータ メモ：jekill 静的なHTMLジェネレータを使ってみた Hugo -Goでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる知識だけで使える静的サイトジェネレータ メモ：Hugo サイトジェネレータを使ってみた jekyllと比べて なんで、いま静的HTMLジェネレータなのか サービス・商材をWeb上で売るということ、と、CMSの関係 私は普段、自社が提供するサービスや商材を紹介するブランドサイトを運営しています。 スペック的には、レスポンシブなHTML・CSS＆JSでフロント、CMSテンプレートカスタマイズ（WordPres

Bootstrap3の <table> には標準クラスで用意されているものがあるのでまとめてみました。

関西地方でおこなわれる音楽フェスを一挙に紹介していきますね。 関西の音楽フェスというと国内外の人気アーティストが出演する大型フェスはもちろん、アーティスト主催の人気イベントも数多く開催されています。 またジャンルにおいても、ロックだけではなくヒップホップやレゲエ、ジャズのイベントもたくさんあって、規模やジャンルを問わずに毎週たくさんのイベントが開催されているんです。 中には家族でのお出かけにピッタリなイベントもあるので、この記事をご覧いただき気になったイベントがあればぜひお出かけしてくださいね。

基本的にIDE支援の恩恵を得て楽をしたい派なので、こんな感じでエディタを使い分けていました。 iOSアプリ開発: Xcode Windows開発: Visual Studio (最近はParallels上で) その他の開発: IntelliJ それ以外ちょっとした編集: Sublime Text Visual Studio Code(以下vscode)は、初期リリース時にちょっと触った程度でしたが、0.10.1アップデートで改めて触ってみたらとても気に入り、Sublime Text + IntelliJの一部の領域を代替出来そう、と思って乗り換えました。 Sublime Textに満足してたから、Visual Studio Codeは試用程度しかしてなかったけど、昨日けっこう触ったらとても気に入ったのでほぼ乗り換えモード(　´･‿･｀) TypeScriptで拡張書けるのも良い。 http

Visual Studio Codeの拡張機能を使ってみよう：特集：Visual Studio Code早分かりガイド（2/2 ページ） 拡張機能のインストール Go言語について Go言語はグーグルが開発しているプログラミング言語だ。VS Codeはデフォルトで、Go言語の構文ハイライト表示をサポートしているが、ここでインストールするGo言語用拡張機能（と追加のツール）をインストールすることで、それ以外にもコード補完、定義へ移動、参照の表示などの機能が利用できるようになる。Go言語用拡張機能単体では、使用できるのは構文のハイライト表示とスニペット程度のようなので、興味のある方はぜひともその他のツールも一緒にインストールしておこう。 なお、Go言語自体のインストールについてはここでは触れないこととする。Go言語のインストールと各種設定についてはGo言語の公式サイト以下にある［Getting

投稿日：2015年11月17日 更新日：2015年11月17日 CSS, HTML, JavaScript 3995文字：約7分 ONZE 株式会社 オンズ ONZE https://on-ze.com/blog/4500 今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。 後で紹介するスタイルシートの［remodel-default-theme.css］がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。 以下、実装方法を紹介していきます。 ［Remodal］の必要なファイルを

感想 動作は気持ちいい まだGo開発で使うのは早いかも 自動補完欲しい 定義ジャンプ欲しい プラグイン書かせて欲しい SublimeTextからの移行だと、タブ無しUIに慣れる必要あり Visual Studio Codeはマルチプラットフォームで動作する無料のIDEです。 まだプレビューリリースされたばかりなので、機能的に不十分な部分もありますが、 UIはAtom風で、gulpタスクと連携できたりと機能が豊富なIDEです。 Go言語は、シンタックスハイライトと対応するブラケットの表示のみサポートしているようです。 https://code.visualstudio.com/Docs/languages 今のところはユーザーによる言語設定の拡張に対応していないようですが、考えてはいるらしいです。 近い内に対応され、Go関連の機能が満載になることを祈りながら使いましょう。 （私はSublim

静的サイトをどのように制作していますか? 静的サイトジェネレーターを使っていますか? Web デザイナーは Photoshop や Sketch でサイトデザインをして HTML / CSS / JavaScript でコーディングといった、静的サイトの制作を行う機会が多いかと思います。 私の場合も同様に、Wordpress や Web アプリケーションに組み込むための静的サイトを制作することが多く、これを効率的に行うべく LESS をやり始めたのですが、周りで使っている人がほぼ皆無。Sass / SCSS 割合の高さに焦り、慌てて切り替えました。 そして、さらなる効率性を求めて 1 年ほど前から静的サイトジェネレーターを取り入れました。 静的サイトジェネレーターとは？そもそも静的サイトジェネレータとは、静的サイトを効率的に制作するためのツールで、好みの言語で開発して納品用に HTML /

たまに耳にする React を自分なりに少し調べてみたので、まとめがてらメモを残します。 ちなみに初めて React を知ったのは 天下一クライアントサイドJS MV*フレームワーク武道会でした。 Reactとは Facebook のチームが開発している、ユーザインタフェースを構築する為の JavaScript ライブラリです。公式ページ ⇒ http://facebook.github.io/react/ その特徴は（公式ページどおりですが）、 MVCの Viewのみ サポート なので恐らく 他のライブラリと容易に組み合わせ られる Virtual DOM (仮想DOM) 1方向 の Reactive バインディング Reactive .. きっと、(見えないところでシステムが)動的に View を更新する、という雰囲気でしょうか.. 公式ページを見ると、やり方によっては双方向にもできる

Yeomanを使ってみよう Yeomanのセットアップ ここからは、Yeomanを使ってアプリのひな型を生成してみましょう。GruntとBowerはすでに使用できる状況なので、ひな型生成ツールであるYoモジュールをインストールします。 下記のように、グローバルオプションを付けてインストールしてください。 Yoがひな型を生成するための定義を記述したNode.jsモジュール「ジェネレーター」 先ほども少し解説しましたが、yoモジュールは「ジェネレーター」という仕組みを使って、アプリのひな型を生成します。ジェネレーターとは、Yoがひな型を生成するための定義を記述したNode.jsモジュールで、使用する用途／フレームワークに応じてさまざまな種類のものがあります。 ※Webアプリ用／Node.jsのExpress用／AngularJS用などジェネレーターはGrunt用モジュールと同じく、npmで検索

第9回茨木麦音フェスト 2023 大復活祭！　無事閉幕致しました！ 4年ぶりの開催となった麦音でしたが、ブランクを感じない沢山のご来場ありがとうございました！ 改めて麦音を愛してくださる皆様の温かさに触れ、感謝の念に耐えません。 関わってくださったすべての皆様、ご来場いただいたすべての皆さまに御礼申し上げます。 来年の記念すべき”10回目”に向けて実行委員一同、さらに頑張りたいと思います。 皆さまに会える日を楽しみに。これからも麦音をよろしくお願い致します！ 茨木麦音フェスト実行委員会