ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita
ReactStudioを使ったアプリの作り方はこちら React Studioを使ってQiitaの記事一覧アプリを作成してみる はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。 公式サイト 公式サイトへのURLはこちら。 React Studio https://reactstudio.com/ ツールの使い方 ReactStudioでコンポーネントをデザインします。 その後、コードが自動生成されます。 無料で
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
フロントエンド開発者向けのAlfred Workflow - アインシュタインの電話番号
1ヶ月前に、Web開発者にオススメなAlfred用のWorkflowをまとめたGitHubリポジトリが2,000 starsを超える人気を博していて、その中に自作のFont Awesome Workflowも選ばれていて、それをきっかけに開発者向けのWorkflowが盛り上がっていることを知った。[^1] [^1]: このリポジトリは更新が遅く、各Workflow作者の最新バージョンを反映していない問題があったため、Font Awesome Workflowではこちらから削除依頼を出してリストから消してもらいました。そのため現在は掲載されていません。 つい最近だと、Googleのエンジニアで著名なAddy Osmaniがプレゼンで紹介していたり、フロントエンド向け情報サイトとして有名なSmashing Magazineが特集記事にしていた。 Automating Front-end Wor
二つのドメイン間の表示差分をチェック·wraith MOONGIFT
wraithはRuby製のオープンソース・ソフトウェア（MIT License）です。 Webサイトがリニューアルしたりちょっと表示を変更したりした際にそれをチェックする術があると便利です。今回はBBCニュースが開発したwraithを紹介します。 インストールは一行のコマンドを実行するだけです。 設定を作成した後はrakeコマンドを実行するだけです。 指定したURLの画像保存が終わるとその差分をチェックします。 このようにちょっとだけ表示が違うのが分かります。 ブラウザベースで見た場合もちょっとだけ異なるようです。 こちらが取得したファイルの一覧。多様な画面幅に合わせて画像が取得されています。 wraithは二つのドメイン、複数のパスに対してその表示差分をチェックできます。異なる部分は青い色で表されます。基本的にはGoogleのような国際的サイトがターゲットになりそうです。画面幅は320〜
無償のWebサイト構築ツール「WebMatrix 2」、新版はiPhone/iPadエミュレータ、Node.js、CoffeeScriptなど対応
無償のWebサイト構築ツール「WebMatrix 2」、新版はiPhone/iPadエミュレータ、Node.js、CoffeeScriptなど対応 先週末に行われたWindows Azureの新機能を紹介するイベント「Go Azure」の基調講演の中で、Azure以外に興味を引かれたソフトウェアがありました。マイクロソフトが無償で公開しているWebサイト構築ツール「WebMatrix」の新版、「WebMatrix 2」です。 WebMatrixは、HTML/CSS/JavaScript/PHP/ASP.NETなどに対応したエディタ機能を備え、コード補完機能も搭載。ローカルにデータベースやWebサーバを用意してPHPの動作をそのまま確認したり、WordPressやDrupalなどのWebアプリケーションをローカルで試すこともできました。 下記はその画面（参考：マイクロソフト、無償のWeb開発
30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記
Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ
最近のウェブ系スタートアップが採用しているプログラミング言語やフレームワークまとめ - laiso
http://www.quora.com/Node-js-Ruby-Python-who-wins-in-5-years を読んでて「勝利条件としてより多くの”スタートアップ”に選択されること」という話がでてたけど、そもそも今は何が採用されているのか状況がよくわかたっていなかったので調べた。 スタートアップ？ 一般(自分の周辺)に「ウェブサービス」みたいな呼称されているもの。消費者向けというかなんというか、企業向けシステムとか、ソーシャルゲーム単品とかは含めないことにした なんでスタートアップ？(小規模な企業) 企業が大きくなってくると、いろんな領域で必要なことがあってこの企業は→このプログラミング言語みたいなひもづけができなくなるので 項目は =企業ではなく=サービスでわけた 順番、国内外は適当。できるだけ知名度のありそうなサイトを選んだ いわゆるサーバーサイドのアーキテクチャの話(それ
ウェブ執筆者におすすめのGoogle Chrome拡張機能＋ウェブアプリ厳選33個まとめ|ガジェット通信 GetNews
ウェブで執筆を行うすべての人たちへ ウェブを活用しながら執筆をおこなう『ウェブライター』の人にとって便利なChrome拡張機能をまとめてみました。Google Chromebookの発売も近くなり、Chrome OSだけでどう仕事をこなすか真剣に検討をはじめている人もいることでしょう（まだ気がはやいですか？）。作業環境をすべてブラウザ上に移行するという勇者はまだ少ないかもしれないけど、Googleの急速なウェブアプリへのシフトにより、ウェブで執筆をおこなっている人たちにとって便利な環境が整いつつあるのは確かで、全部ブラウザとはいわないものの、ある程度ブラウザ上で作業ができるようにしておくことで作業効率を上げることができる時代に入った、とは言えるでしょう。 というわけで、ウェブで執筆をおこなう人にとって便利なChrome拡張をまとめてみたので、活用してください。実はこれ、記者が自分用にメモし
2011年2月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル
先月の記事が相当人気でしたので今月もやります。また今月も人気なら来月もやります。 これは Web サービスに使えると思った情報 Web サービスを作りたくなるアイディア込みの記事 今年こそWebサービスを作りたい人に伝えたい５つのこと（＋番外編） – パパパパ この記事は精神からではなく、アイディアから Web サービスを作りたくしてくれる記事でした。私はこの記事を通して以下のことを学んだというか勝手に気づいたのでリストアップしておきますね。 ブログパーツを作って宣伝をする。 自動的に一周するサイクルを考える。 面倒くさいものを作ることで大手に参入されない。 時間を短縮する関係のサービスを作る。 食べログとぐるナビから Web サービスの現在と今後を見る [jp]グルメサイトは転換期に来てるんじゃないかなあという話 この一点に置いて、私は個人的にグルメ系の Web サービスとは誰かが得
ウェブ開発者に人気のFirefoxアドオン10 - ネタフル
10 Popular Firefox Add-ons for Web Developersというエントリーで、ウェブデベロッパーに人気のFirefoxアドオンが10種類まとめられていました。 知っている人には当然のアドオンかもしれませんが、これからウェブデザイナーを目指そうといった人には参考になると良いのですが。 1. Firebug :: Add-ons for Firefox Firefox上でCSS、HTML、JavaScriptを編集したりデバッグすることができる。 2. Web Developer :: Add-ons for Firefox ツールバーにJavaやcookie、CSSの切り替えといったメニューを追加する。 3. ColorZilla :: Add-ons for Firefox カラーピッカーのアドオン。 4. Html Validator :: Add-ons
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
)
Web APIのテストにも。ダミーWebサーバ·ww MOONGIFT
wwはRuby/Sinatra製のオープンソース・ソフトウェア。Web APIを使った開発の場合、自動化したテストをいかに行うかが問題になる。特にWeb APIのように他サービスのリソースを使う場合、テストで過剰アクセスするとブロックされてしまう危険もある。 外部サービスを使った開発で利用 それを回避するにはテスト用に別途サーバを用意するのが良い。設定ファイルでテスト時や開発時にはローカルのサーバにデータを飛ばすのだ。柔軟にレスポンスデータを返すのにwwが面白そうだ。wwはSinatraで作られたダミーのWebサーバだ。 wwはレスポンスデータを設定したスクリプトを使ってサーバを立ち上げる。SinatraなのでURLの設計は容易で、レスポンスデータの設定も簡単だ。ユニットテストとも連携でき、自動的に立ち上がってテストができる。テストケースごとにサーバがリセットされる機能もある。 リクエスト
Google ChromeをWebサイト制作で用いる·Pendule MOONGIFT
PenduleはGoogle Chrome向けのオープンソース・ソフトウェア。Google Chromeのシェアが徐々に伸びている。一般ユーザはIEを使い続けるケースが多いことを考えると、注目するのはプログラマやWebデザイナといったITリテラシーの高い層になるだろう。 Webサイト制作に便利な機能が揃う そうなるとGoogle Chromeにまず欲しいのがクリエイターのための便利ツールだ。だが標準で用意する必要はない。機能拡張として既に提供されているのだ。それがPenduleになる。PenduleはWebデザイナーが便利に使えるGoogle Chrome機能拡張だ。 Penduleをインストールするとアドレスバーの横にアイコンが表示される。メニューは画像系、W3C系、CSS無効に分類される。CSS無効はその名の通り、クリックすると表示されているサイトのCSSが無効になる。この状態で必要な
高速にWeb開発をするために便利ないくつかのTIPS - KAYAC Engineers' Blog
outputz でいまだに1位になれたことがない村瀬です。 社内で開発をスムーズにするための tips 集を紹介したので、まとめておきます。 記事ではデモができないので便利さが伝わらない物も多いですが参考になれば幸いです。 screenとかzshとか便利だよ！と言う話は社内ではさんざんしているのでありません。 また、OSX 限定の内容もあります。 でははじめましょう。 keychain keychain と言っても OSX の KeyChain ではなく、コマンドラインのツールです。 これは ssh-agent をより便利にするためのラッパーです。これを使用すると ssh の秘密鍵のパスワードを一度入力するとあとはパスワードなしで ssh 接続できるようになります。 「同じこと二回も言わせんな！」といつも切れているような人は導入すると良いでしょう。 使い方は $ keychain ~/.s
携帯電話向けWebアプリのセッション管理はどうなっているか - ockeghem's blog
最近購入したPHP×携帯サイト 実践アプリケーション集を読んでいて妙な感じがしたので、この感覚はなんだろうと思っていたら、その理由に気づいた。本書に出てくるアプリケーションは、PHPのセッション管理機構を使っていないのだ。そんな馬鹿なと思ったが、目次にも索引にも「セッション」や「session」という語は出てこない。サンプルプログラムのCD-ROM上で session を検索しても出てこないので、セッションはどこでも使っていないのだろう。 そうは言っても、本書にはブログやSNSなど認証が必要なアプリケーションも登場する。本書で採用している認証方式はこうだ。 携帯電話の個体識別番号を用いた、いわゆる「かんたんログイン」のみを使う 認証状態をセッション管理機構で維持しない。全てのページで毎回認証する そのため、「iモードID」など、ユーザに確認せずに自動的に送信されるIDを用いる つまり、全て
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ruby on Railsで可愛い子が集まるエロサイトを公開するまでの２４Ｈ
Web制作者が読んでおきたい、最近公開されたおすすめのスライド
「Google Chrome Deveoper Tools」はこう使う！ 基本機能チュートリアル & GDD 2011 セッション概要
ウェブデザイナーにおすすめ Google Chromeエクステンションいろいろ | DesignWalker
