isormorphic meetupの資料です
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術(HTML/CSS/JS)を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
みなさんご無沙汰しております。ちょびえです。 最近はやりのElectronでゲームの設定ツールを作ってたので事例共有ということで記事を書いてみたいと思います。 事例共有なのであまり技術的な内容ではありませんが、少しでも皆様の参考になれば。 (免責としては、自分のチームの話なので全体としてこう、というわけではありませんのでご了承下さい) モチベーション 元々UnityEditorの機能を使って色んなツールを作っていたのですが、特定のGUI APIに依存した少し複雑なGUIツールとなるとメンテを他の人に託しづらくなってしまう問題があります。 会社として普段からWindowsやMac向けのアプリケーションを作っている、とかであれば特に問題にならないと思うのですが。どうしても弊社のようにWebサービスが主力な会社だとHTML,JavaScriptを始めとした技術が得意な人が多く、Nativeアプリ
背景 先行・類似事例 自作のメリット Rustで局面画像生成 盤・駒画像の素材 画像処理 入出力 Generatorと下準備 Publish Web Appで使う CDN Edgeで動かす wasm-packでWebAssembly作成 Deno Deploy Vercel Edge Functions Cloudflare Workers Fastly Compute@Edge その他 まとめ Repository 背景 ATrium という AT Protocol のためのライブラリを自作している が、まったくドッグフーディングしていなかった ので、Blueskyに詰将棋の問題を放流するBotを作ってみることにした gfx氏が作ったBot を参考に というわけで、詰将棋の問題の局面を画像で投稿したい が、あまり自分好みの画像を生成できるライブラリやWebサービス等がない ので、結局それ
Sikiの概念¶ 電子掲示板(BBS)はサイトによりいろいろな形態があるものの基本はスレッドの一覧があり、各スレッドに対してユーザーがレスを投稿するという形をとっています。Sikiはこういった掲示板という概念を抽象化し共通項(レスの名前、ID、本文、いいねの数、レスの返信/被返信 etc.)を抽出し同一のインターフェースに落とし込みます。 要は様々な掲示板を同じように扱えるようにするというのがSikiの最終目標です。 基本はPC向けの2ch専用ブラウザを踏襲しているので使っていた方は問題なく扱えると思います。 一般的な専ブラ同様スレッドと板を複数のタブで開くことができますがSikiはワークスペースによってそれら全てを一度に切り替える事ができます。 これは複数サイトを扱うという前提で作られているというのもありますが 同じサイトでも実況、専門系の板、ニュース系板それぞれの最適な背景、色、表示ス
Research Magnetic resonance... Magnetic resonance imaging of male and female genitals during coitus and female sexual arousal Papers Magnetic resonance imaging of male and female genitals during coitus and female sexual arousal BMJ 1999; 319 doi: https://doi.org/10.1136/bmj.319.7225.1596 (Published 18 December 1999) Cite this as: BMJ 1999;319:1596 Willibrord Weijmar Schultz, associate professor of
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 元記事: Awesome Python Awesome List in Qiita Awesome Ruby Awesome Java Awesome JavaScript Awesome Node.js Awesome Go Awesome Selenium Awesome Appium 管理パネル 管理インタフェース用ライブラリ ajenti - サーバ用管理パネル. django-grappelli - Django 管理インターフェースのためのジャズスキン. django-jet - 改良された機能を備えた Django 管理イ
はじめに 2022 年 1 月から、趣味で PC 向けの将棋アプリを開発しました。その中で取り組んだことや学んだことについて簡単にまとめます。 作ったもの ShogiHome 背景 最近ではスマホやタブレットでも将棋の対局や研究ができるようになりましたが、本格的に将棋の勉強や研究をするには必ずしも十分ではなく、特に将棋 AI を動す上で PC の処理能力やカスタマイズ性は有用です。 2010 年あたりからオープンソースの将棋 AI が増えましたが、その多くは GUI や通信対局機能を備えておらず GUI のアプリケーションと組み合わせて使う必要があります。AI と GUI がやりとりするための USI という共通仕様があり、 USI に対応しているものどうしなら任意の GUI と AI を連携させることが可能です。 USI 対応の GUI は何種類か存在しており、かなり良く作り込まれたアプ
When Brendan Eich created the very first version of JavaScript for Netscape Navigator 2.0 in merely ten days, it’s likely that he did not expect how far the Slack Desktop App would take his invention: We use one JavaScript code base to build a multi-threaded desktop application, routinely interacting with native code, targeting Windows, macOS, and Linux. Managing large JavaScript codebases is chal
backlogというのは一般名詞のほうのbacklogではなく、ヌーラボさんのプロダクトのほうのbacklogです。 www.backlog.jp だいたい土日の2日間でできたのでよかった。 作ったやつどこにおいてあるか アプリ BackLogger-darwin-x64_v0.1.1.zip - Google ドライブ ソースコード github.com スクリーンショット タイトルの通り、Scala.jsとElectronで作られています。 なぜ Scala.js と Electron で作ったのか Scala.js がどれくらい実用的に使えるのかを知りたかった Electoron の得意なこと、苦手なことを触ってみて検証したかった というまっとうな理由と、 来年のScalaMatsuriに応募するためのネタがほしいな〜 「で?なんか偉そうに設計の話してるけど、お前はそれで何作ったの?
josdejong氏作のJSONエディタを、Electronでデスクトップ用アプリに移植しました。 github.com 元のJSONエディタはこちら。めちゃ高機能で便利。 僕が書いたコードはたった200行くらいです。 github.com なぜ作った 仕事でイベント用のUnityアプリを作る事が多い 現場でパラメータを調整するために、パラメータをJSONやCSVファイルに出しておくことが多い SRDebuggerとかでアプリ内に設定画面を作る事も多いけど、その時間すらない事もある プログラマー的にはJSONを使いたい プログラマー以外の普通の人にとっては、JSONの編集は難しい CSVはエクセルで編集できて便利という世界観 普通の人が使えるJSONエディタがほしい オンラインJSONエディタは良い奴がたくさんある exeで欲しいんだが!!! Electronでラップしたら良いのでは? E
Extensible mobile app debuggerFlipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API. ToolsMobile developmentFlipper aims to be your number one companion for mobile app development on iOS and Android. Therefore, we provide a bunch of useful tools including
数か月前、ゲームのコミュニティなどで人気のチャットアプリ「Discord」のデスクトップ用アプリケーションに任意のコードを実行可能な問題を発見し、Bug Bounty Programを通じて報告しました。発見したRCEは、複数のバグを組み合わせることによって達成される面白いものだったので、この記事では、その詳細を共有したいと思います。なお、現在脆弱性は修正されています。 調査のきっかけElectronアプリの脆弱性を探したい気分だったので、Electronアプリで報奨金が出るアプリを探していたところ、Discordが候補にあがりました。Discordは自分自身が利用者で、自分が使うアプリが安全かどうかをチェックしたいという思いもあったので、調査をすることにしました。 発見した脆弱性私は主に次の3つのバグを組み合わせることでRCEを達成しました。 contextIsolationオプションの
Electronアドカレの19日目の記事になります。いろんな事情で、3日遅れてすみませんでした。 「Write once, run anywhere(一度書いて、どこでも実行できる)」は一度Javaのスローガンでした。Universal Javascriptが躍進したおかげで、昨今のJavaScriptは多分もっとこのスローガンが描いた姿に近いです。 その中、特にNode-WebkitやElectron(昔のAtom-shell)のおかけで、デスクトップの開発経験のまったくないWeb開発者にとっても、デスクトップアプリケーションを簡単に作れる世の中になりました。しかもJavaScriptのスタックで。 これから初めてElectronアプリケーションを作る方には、自分が初めてアプリを作った時の気づきをいくつか共有したいと思います。 まずどこから始める? Electron開発を始めるに一番の近
素晴らしいものは長く広く影響を与えるのです。 Appleから生みだされる数多くの美しいプロダクト。その全てをジョブズ氏が0から作り上げて来た、というわけではありません。Appleがドイツの家電メーカーブラウン社から多く影響をうけているというのは有名な話。ブラウンで40年以上も製品デザインを手がけるインダストリアルデザイン界の巨匠ディーター・ラムス氏のベストデザインをここに15個紹介します。 606 ユニバーサルシェルフシステム1959年 Tone-Arm Balance1952年 電卓 ET 22 ポータブルテレビ(試作品)ES1000 テレビ FS801964年 デスクファン HL 70 ドライヤー HLD 4 スピーカー LE11959年 Electron Electrostatic Dominoシステム1967年 Sixtant Special SM2 52201963年 SK4 M
目次 bashがない ターミナルがない ターミナルで文字列をペーストできない brewがない エディタがない Atomがタッチイベントを聞いてくれない gitがない Gitクライアント(GUI)がない CRLFにした覚えはない モバイルのエミュレータがない Xcodeがない 既存テストが通らない Sketchがない 1Passwordがない Markdownエディタがない Spotlightがない 英数キーがない Command + Wがない ファンクションキーをデフォルトにできない アプリケーションを閉じるボタンがない Applicationsフォルダがない ホームディレクトリがない バックスラッシュがない 英語環境がない ヒラギノがない Retinaじゃない 開発に必須ないろいろ bashがない WindowsにはMS-DOSの流れを汲むコマンドプロンプトがありました。PowerShe
Okay maybe I am jumping the gun on this but this is some exciting news to say the least! Chrome v70’s recent announcementA recent Chrome version(v70) has released some exciting support for Desktop Progressive Web Applications on Linux and Windows. Here is Chrome’s current support list. One thing you will immediately notice is that MacOS is missing from the list. Fear not it should be here for Chro
人気エディターAtomをもっと使いやすく、生産性を高めるパッケージの紹介です。プレビュー周りの機能を強化して、コーディングの効率をアップしましょう。 この記事では、コードエディターAtomで使えるパッケージを紹介します。このパッケージを使うと、タイプしながら変更点をプレビューしたり(特にWebサイト開発向け)、エディターからコンソールやIDEに移動せずにコードをコンパイルして実行したりできます。また、メリットについても記しました。 参考:ショートカットのCtrl|Cmdは、Windowsなら「コントロール」キー、OS Xなら「コマンド」キーを指します。 変更点のライブビジュアライズ プログラムのコーディングからビジュアライズ(結果確認)へと移動するのは時間のムダなだけでなく、認知のロスを伴います。つまり、タスクの切り替えにより集中力と精神力が失われるため、生産性が低下するのです(『The
Of the myriad ways to program computers, scripting languages are the most effortless and practical variety. Of these, the web browser scripting language (JavaScript) is the fastest, most popular, and the only one with an industrial standardization process. It is clear that the web will be with us for a long time to come; and thus JavaScript will be with us for a long time to come. Extending web pr
アト秒レーザーで位相を分けた電子波動関数の直接イメージングに成功 新規なアト電子テクノロジーの開発に期待 早稲田大学理工学術院の新倉弘倫(にいくらひろみち)教授は、カナダ国立研究機構 (National Research Council of Canada)、独マックス・ボルン研究所(Max Born Institute)と共同で、アト秒レーザー(高次高調波)によるネオン原子の光イオン化過程で生成した、ほぼ純粋なf-軌道電子(電子波動関数)の密度分布と、その位相を分けた波動関数に相当するイメージの直接測定に成功しました。またさらに、イオン化した電子波束がどのような位相と振幅を持つ波動関数から成っているかを同定する方法を開発しました。 20世紀初頭に発達した量子力学によれば、原子・分子や電子などの極微の物質は波としての性質を持ち、波動関数(Ψ)で表されます。Max Bornの解釈では、電子波
Kyoto.js #11 というのがあって、せっかくなので最近ぽちぽち作っていた「node-midiで仮想MIDIデバイスを作る」という内容で LT しました。他には GitBook とか arduino と Node.js で格闘してる話とか自分も似たような事をしそうだな〜的なものから、あんまり知らない話とかあって良かった。戦ってる話が多かった気がする。 kyotojs.connpass.com 要約するとMIDIデバイスって便利だけど持ってないと使えなくて困る。でも node-midi というパッケージを使えば、仮想MIDIポートが作れて、それだとパソコンを騙してMIDIデバイスを持っていることにできるので Electron で UI をつけたら万事オッケー。三つくらい作ってやったわー。くぅ〜。という内容です。 speakerdeck.com 使ったライブラリ node-midi -
みなさんは次世代の画像形式「WebP(ウェッピー)」をご存知ですか? 聞いたことはあるものの、作り方や採用したときのメリット、事例にピンとこない方が多いのではないでしょうか。「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。本記事では、このアプリケーションでの使い方から、ウェブページにWebP画像を配置する方法を解説します。 ▲ オリジナルアプリケーション「WebP画像を作る君」。無料で配布しています ▲「WebP画像を作る君」の動作ビデオ WebP(ウェッピー)とは WebP画像形式は米Googleが開発している静止画フォーマットで、採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。具体的には従来のPNG/GIF/JPEG画像形式に比べて次
2014-06-08 細胞寿司と実際の細胞はどれくらい違うか比較してみた 科学 久々に細胞寿司でも作ろうかな。 pic.twitter.com/aqjHV493wS— 石川 伸一 (@yashoku_nikki) 2014, 6月 8 博士の愛した寿司 「“細胞”海苔巻き」 - 夜食日記 twitterを見ていたらこんなtweetが流れてきました。石川さんは以前にこのような記事をお書きになり、大変話題になった方です。教科書に載っている細胞小器官の図を見事に寿司に取り込んでいて素晴らしいですね!!!さて、教科書に載っている細胞のモデル図、実際の細胞とは大きな違いが有ります。せっかくですので、それについて書きます。 細胞のモデル図教科書的には、以下の様な動物細胞のモデル図がよく載っています。細胞寿司はこの図の特徴をよく反映していて素晴らしいです。 動物細胞寿司か? pic.twitter.c
先日書いた 『Electron の入門エントリー』 が好評だったので私の大好きな Riot.js の入門も書いてみました. AngularJS や React でもいくつか Web アプリケーション作ってきましたが, 私にとっては Riot.js が一番しっくりきました. なので今回は Riot.js について紹介します. とにかく詳しい説明はいいから触って試してみたいって方はぜひ読んでみてください. Runstant を使ったデモを並べているので, このページ上で実行したりコードをいじることができます. 実際に動かしながら, Riot.js がどれだけ使いやすいか体感してみてください♪ Riot.js とは? 今のところ私にとって(使いやすさ, 手軽さ, 規模感総合して)最も優れた JavaScript フレームワークです. 主な特徴 個人的に Riot.js でいくつかサービス作ってき
Electron v0.36.0 から使えるようになった desktopCapturer モジュールと WebRTC を使ってリアルタイムに配信するアプリを書いていたのですが、 最低限動くものができたので公開しました。 https://github.com/yuitowest/decap 追記(2016/1/20) パッケージングしたものを公開しました。 https://github.com/yuitowest/decap/releases/tag/1.0.0 右上の歯車アイコンからチャンネルIDと配信用トークンを設定できるようにしてあります。 チャンネルIDと配信用トークンを設定していない場合は配信開始できないようになっています。 使用した技術
Test your app An open source framework for easily writing integrations tests for your Electron app. Spectron sets up and tears down your app and allows it to be test-driven remotely with full support for the Electron APIs. Built on top of ChromeDriver and WebDriverIO.
URLにタグを付けるやつ 8月頃からAmazon API Gateway, AWS Lambda, Electronと、徐々にJavaScriptを触る機会が増えてきて結構面白くなってきたので、サーバサイドでの開発も試してみようと思い、一昨日から暇を見つけて簡単なWebアプリをつくってみてる。いまは習作としてURLにタグを付けられるだけのサービスをつくってみてる。コメントとか無くて、タグで情報整理して互いの役に立つことだけでコミュニケーションする。どうしても会話したかったらタグで会話すれば良さそう。公共性のある徳の高いタグをつけた人には何らかの承認をしてあげたいけどまだ特にアイデアが無い。構造的には、ユーザ入力があるし、データは永続化する必要があるし、そこそこ検索も必要だし、キャッシュのしがいもあるし、ログイン機能があるのでセッション管理とかも考えられて、練習に丁度よい。 凝りすぎて進捗ダ
目次# 前編 準備段階:計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
普通に生きていると、Googleアカウントがどんどん増えてきますよね。 GoogleはWebアプリが非常によくできているので、Macで使う場合もできればOS標準のカレンダーアプリなどではなくブラウザから使いたいものです。しかし、そうしてると、常々開いているタブ増えてしまいますよね。 で、自分の場合、↓のようによく見てるやつは Pin Tab してたんですが、 なんかいまいちだなーとずっと思っていて、hmsk くんに会いに行ったときにたまたま話してて Shift というツールをおしえてもらいました。 Shiftで、試しに使ってみたらすごく良いかんじでした。 複数の Google Apps アカウントを管理でき、それぞれの Organization パネルから、メール、カレンダー、ドライブへかんたんにアクセスできるクラウドに設定が保存されるので複数のPCから使っている場合にも、いつも使っている
Read this in Japanese. What is Electron? Electron is a library you can use to build desktop applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers as well as be placed in the Mac and Windows app stores. Next: Why is this important? Definitions: JavaScript, HTML and CSS Are web languages, meaning they are the building blocks of webs
QiitaとAdventarにあるアドベントカレンダーについて、個別の記事とカレンダー全体のはてなブックマーク数のランキングを27日の0時ごろに集計した 個別記事上位100件のURLについては軽く目で見て最近の記事でなかったりするURLをフィルタリングしてある(漏れはありそう ↓途中経過は下に sucrose.hatenablog.com ちなみにQiitaは公式のランキングがあります Advent Calendar 2016ランキング - Qiita カレンダーの合計ランキング 以下カレンダーとカレンダーに登録されている記事のはてなブックマークの合計数のランキング 順位 カレンダー名 はてなブックマーク数 1 はてな 4846 2 システムエンジニア 3453 3 LITALICO Engineers 2585 4 クラウドワークス 2393 5 Supership株式会社 1981 6
# Callback Hell *A guide to writing asynchronous JavaScript programs* ### What is "*callback hell*"? Asynchronous JavaScript, or JavaScript that uses callbacks, is hard to get right intuitively. A lot of code ends up looking like this: fs.readdir(source, function (err, files) { if (err) { console.log('Error finding files: ' + err) } else { files.forEach(function (filename, fileIndex) { console.log
記事の投稿に特化したTumblrクライアントを作りはじめた。 レポジトリ https://github.com/mzp/tumblotte 動機 TumblrはリブログするだけのWebサービスでもなく、高機能なブログサービスでもあることに気がついた。 Markdownで書ける。 独自ドメインでの運用もできる。 複数のブログも管理できる。 テーマも多数存在する。 しかし、TumblrのWebUIは長文を書くのには向いていないので、Tumblrのクライアントを作りはじめた。 ElectronやReact.js等のJavaScriptまわりの技術にキャッチアップしたかった、という理由もある。 機能 Tumblrへの投稿・更新 Markdownのライブプレビュー 既存の投稿記事の取得 投稿先のブログの切り替え 投稿した記事をWebブラウザで開く Kobitoを意識しながら作りはじめた。 が、インタ
オープンソースのアプリケーションフレームワーク「Electron」を使ったアプリが相次いでMac App Storeからリジェクトされているという(GitHubに投稿されているissue)。理由はAppleが非公開にしているOSのAPIを使用しているためだという( Slashdot、サイト更新停滞ちうっ)。 これらの非公開API呼び出しは以前のバージョンから含まれていたが、Appleがレビューを厳格化した結果、引っ掛かるようになったようである。利用者にはElectronのバージョンアップを待つしか出来ることがなく、困った事態となっているようだ。 なお、ElectronはGoogle Chromiumベースの技術を使用しており、そのChromiumが非公開APIを使用していたのが原因のようだ。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く