ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/390/room ーーーーーーーーーーーーーーーーーーーーーーーRead less
OpalはRubyのコードをJavaScriptに変換するコンパイラです。Opalを使うと、Rubyのプログラムをブラウザ上で動かすことができます。 Opal: Ruby to JavaScript Compiler Opalの用途 ブラウザで動くアプリケーションをRubyで書けるよ、というのが主な用途になります。JSでいいじゃん、という人には訴求しないですけど…、Rubyをブラウザでも使いたい、という人にはとても良くできているツールだと思います。筆者はJSも書けなくはないですがRubyが一番長く使っていて手に馴染むので、Opalの可能性には期待しています。というだけではなくて、DXOpalというゲームフレームワークと、OvtoというWebフレームワークを実際に作って使っています。 Opalでゲームプログラミング DXOpalは筆者が作ったゲームフレームワークです。Rubyist Maga
まずこの記事はChrome最新版に基づくものです。その他のブラウザの情報や検証結果などありましたらコメントいただけるとありがたいです。 今回の無限アラートがブラクラだとして、不安を煽るような記事が多数存在しており、もちろんエンジニアなら簡単にわかることですが、その会社の影響なのかブラクラだと勘違いする人が自分の観測範囲に多くいたので、なぜブラクラではないのか技術的な観点から検証していきたいと思います。 まずブラクラ(ブラウザクラッシャー)は広い意味で使われているので、齟齬が無いようにこの記事内での言葉通りブラクラはブラウザをクラッシュさせるものだと定義します。実際にブラウザがクラッシュする他に著しく不安定になったり、正規の方法で閉じれなくなるようなこともクラッシュに含め、ブラウザのバグに起因するものは除外するとします。 無限アラートがブラクラではないことを検証する前に、ブラクラがどんな物な
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね?」と危機を感じたので0から作り直しました。 サイト: https://pf.nekobooks.com/ ソース: https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
やりたいこと データを変形・加工するスクリプトをURL上にホストをして、 ポータブルで永続的でブラウザで完結するWebアプリを作れるようにします! Rubyはデータ加工に最適! Rubyは豊富なメソッドが標準で用意されていて、特にArray, Enumerator, Stringなどよくデータを加工したいときに使えるメソッドがとても豊富です。 メソッドチェーンでつなげていけるところが、人の思考にあっていて、どんどんデータを変えていけるところがRubyの良さだと思います。 そのためデフォルトの言語はRubyです。JavaScriptもオプションで選べるようになってます。 そこで、 データ加工に便利なRubyで書いた小さいWebアプリをURL上にホストします! URLにすべてのコードを載せてしまえば究極的にポータブルなWebアプリになるのではないかという発想です。Itty.bittyにインスパ
GASでこんな事が出来るよ。という一例として書かせていただきます。 事の成り行き 事の始まりは、ある飲み会の時に自社の営業部門のマネージャ(M)から言われた一言。 M「あのさ。今、うちって社用車を使ったら紙に運転日報を記録して管理してるじゃん?それをやめようと思ってスプレッドシートで管理しようとしたんだけど、毎回スプレッドシートにアクセスして記入するのって億劫だしiPhoneからだと入力しにくくて。。。なんか良い感じに、アプリケーション作ってくれない?」 私「あ、なるほど。ならGsuite(google)だけで完結する、アプリケーション作りますよ。ちょうど明日から出張だったんで、行き帰りの新幹線の中ででも作っときますね。」 という事があり、運転日報をGASで運転日報を作りました。 まずは、完成して現在運用している画面を見てください。 後半で画面の全体と説明を行いたいと思いますが、このような
※※※※※ 本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます. m(_ _ )m 1/3 【ウェルカム画面編】:799円 → 199円 2/3 【ホームタブ編】:899円 → 299円 3/3 【プラスボタン編】:999円 → 399円 ※※※※※ 1. ウェルカム画面編 ← 今ココ 2. ホームタブ編 3. プラスボタン編 note.muの中の方からもコメント頂けました!ありがとうございます! ↑このシリーズの最終完成形 ↑この記事での目標 この記事で得れる物・上図のスマホアプリが作れるようになる ・React Nativeの流れを図で直感的にわかる ・なぜこのようにプログラミングをしたのかまでわかる この記事の対象者
利用したもの Git npmパッケージでgithubからURL指定でリポジトリから取得してくる時に利用する node.js electronのnode.jsはnpm時に自動的にインストールされる npmをインストールしたり開発向けデバッグ起動に使うものでバージョンは神経質になる必要は無い yarn npmより超高速にインストール出来る npm-shrinkwrap.jsonにあたるyarn.lockがデフォルトで生成されるのでバージョン固定化・統一がしやすい npm install -g yarn yarn && cd src && yarn 本プロジェクトではルートにはelectron他、デバッグ、ビルド用devDependenciesを、実際にパッケージングされる場合に必要なnode_moduleはsrc以下にpackage.jsonを作成しdependenciesに追加して無駄なno
いまさらですがReact(react.js)をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 (MVCで言うところの)Viewのみを担当する。
フロントエンド開発のテストを効率化したいと考えている今日、各種ブラウザ上でGUIテストの自動化ができるSelenium WebDriverがあるが、SP(iPhone, Android)でGUIテストを行う場合はAppiumが使えるようなので、とりあえず概要だけ調べてみた。 この記事で書かない事 Selenium WebDriverについて Appiumの環境構築方法について Appiumとは Appium is an open source, cross-platform test automation tool for native, hybrid and mobile web apps, tested on simulators (iOS, FirefoxOS), emulators (Android), and real devices (iOS, Android, Firefox
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。 ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。 普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。 CMSもサポート テンプレートを簡単に作成できる Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。 レスポンシブ対応 レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。 CMSをサポート 動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。 HTML, CSSのコーディング作業は無し コーディング作業は一切無しで、テンプレー
JavaScriptのXHRの送り方いろいろ: XMLHttpRequest, fetch, async/await 目次 前提1. XMLHttpRequest モダンな書き方にしてみよう!2. fetch API3. fetch + async/await結論(おまけ)babelで使う場合参考JavaScriptのXHR(XMLHttpRequest)の送り方は1つだけではありません。モダンなXHRに向けてそれぞれのHTTPリクエストの送り方を比較・検討してみます。 前提jQuery, superagent, axiosなどのAJAX系ライブラリは使用しないこととする。検証に使うブラウザは最新版のChrome (現在はVersion56.0)今回リクエストを送る先は仮想的に下記のURLとする
社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。 なんとなくで読んでください。 Index 「Webサイト用」モダン開発環境 パフォーマンス施策 Webサイト制作において必要な条件 モダンな技術を採用しつつ、今までの案件で使える SPAではなくWebサイトに対応 HTMLファイルが各ページで存在している head内の情報が直接書かれている きれいなHTML minifyされていない Nuxt.jsのgenerateみたいに、最適化されすぎていない 変えたいもの 脱Gulp Gulp -> npm scripts(タスクランナー) Gulp -> webpack(バンドラー、トランスパイラー) jQuery -> Vue.js & Vanilla.js ES2015+ -> TypeScript(Classベース) EJS -> Pug 脱Gulp(Gulpをや
フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン!と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからというだけではなく、他の開発者の技術力を保つためにトレンドについていくことも私の責任のひとつです。 初心者が(そして経験者が)トレンドに付いていこうとして混乱する様を私はよく見かけます。 私は2017年、多くの友人に、キャリアを積むために何を学ぶべきかについて
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか? ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という2箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか? 調査に
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く