Vue.jsで使うGraphQLクライアントライブラリ

Vue.jsでGraphQL使ってみようかと思った時、GraphQLクライアントが結構ゴチャついててどのライブラリを組み合わせて使えばいいのか分かりにくかったのでまとめました 結論 コンポーネント内でリクエストの送信をするなら vue-apollo Vuexのアクションでリク…

Main Memory Database Systems: An Overview

読んだ論文 Garcia-Molina, et al., Main Memory Database Systems: An Overview, in IEEE Trans. on Knowl. and Data Eng., 1992 この論文をざっくりまとめます。 要約 インメモリデータベース(MMDB)はデータをメインメモリに保存するデータベースのことで…

Database Systems Lesson #1 Course Introduction and History of Database Systems

www.youtube.com クイズ Andy Pavlo先生が毎セメスター出してるクイズ。 Q: なぜSNSとして先に登場したfriendstarというサービスは失敗して後続のFacebookが成功したのか A: FBはDBがしっかりしていたから。friendstarはDBが耐えられなくて遅くなって失敗し…

Android StudioでConstraintLayoutが自動補完されずにエラーが出る問題の解決

Android Studioで開発している時にドラッグ&ドロップでオブジェクトを追加する時に以下のエラーが出て困りました。 Missing Constraints in ConstraintLayout This view is not constrained vertically: at runtime it will jump to the top unless you add …

サンフランシスコでweb開発者として就職活動をした

もう1年半も前の話なのですが、2017年3月からビザなし(ESTA)で滞在できる期間、大学を休学してサンフランシスコ(SF)でweb開発者としてフルタイムの仕事(インターン)探しをしていました。 はじめに SF滞在中いろんな日本の方にお世話になりました。本当に感謝…

AliEaters#8参加レポート

2018年11月14日に行われたAliEaters#8に参加しました。 alibabacloud.connpass.com 今回は11月11日(独身の日)の直後だったので独身の日にまつわるトピックが多かったです。 ではセッションを1つずつ紹介していきます。 (1) Double 11 独身の日を支えるAlibab…

Babel7でES6のテストをmochaで走らせようとすると Cannot find module 'babel-core/register'

Babel7でES6のテストをするためにmochani --compilers js:babel-core/register" をつけて実行したところ以下のエラーが起きました。 $ yarn run test yarn run v1.5.1 (node:86730) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security a…

アリババクラウドで作ったサービスを公開して1ヶ月でかかった料金

みなさん気になるお金の話です。 私は今サーバレス+RDSでサービスを公開しています。このサービスが1ヶ月で消費した値段を公開します。 結論 サービスを公開して1ヶ月で4000円分程利用しました。 作ったサービスの構成 ざっくりと、こんな感じです。 作った…

.apkファイルに署名できない問題

.apkファイルの中の署名鍵を消しましょう。 $ jarsigner -verbose -keystore app/myapp.keystore app/build/outputs/apk/app-release.apk myapp Enter Passphrase for keystore: jarsigner: unable to sign jar: java.util.zip.ZipException: invalid entry …

Alibaba CloudのFunction Computeに環境変数を設定する方法

Function Computeに環境変数を設定するためにはtemplate.ymlにEnvironmentVariablesセクションを追加します。 例えば、NODE_ENV=productionを追加したいときはtemplate.ymlに以下を追加します。 EnvironmentVariables: NODE_ENV: production 以下はtemplate.…

HTTPSに対応したAlibaba CloudのAPI GatewayがAndroidでNetwork request failedする問題

API GatewayをHTTPS化したらreact-nativeのAndroidアプリからfetchできなくなってしまいました。 HTTPへのリクエストは成功するのですがHTTPSへのリクエストを送ると以下のエラーが出てしまいます。 TypeError: Network request failed at XMLHttpRequest.xh…

Alibaba CloudのAPI GatewayをHTTPS化する

独自ドメインを設定したAPI GatewayのエンドポイントをHTTPS対応させます。なお、Function Computeをバックグラウンドで動かしています。 基本は以下の公式ドキュメントを参考にしました。 jp.alibabacloud.com SSL証明書の取得 私はさくらのRapidSSLで取得…

Alibaba CloudのAPI Gatewayに独自ドメインを紐付ける

API Gatewayはデフォルトの状態で使うと1日に1000回のリクエスト制限があります。これを回避するにはFunction Groupに独自ドメインを設定しなければなりません。 ここではAPI Gatewayに独自ドメインを設定する方法について書きます。 asmsuechan.hatenablog.…

Alibaba Cloud API Gatewayのアクセス制限に気をつけよう

最終的にはドキュメントちゃんと読めって話ですが、Alibaba CloudのAPI Gatewayを使っているときに403で悩まされました。 以下のリクエストを送った時、API Gateway + Function ComputeのAPIから突然403が返ってくるようになりました。 $ curl -i -H "Conten…

react-nativeで画像が表示されない

react-nativeの<Image>タグが画像を表示してくれなかったときの私の解決法です。 問題 <Image source={{ uri: item.imageUrl }} style={{ height: item.height }}/>のようにすると画像が表示されない時がある。 このアプリ画面中には画像が敷き詰められるはずなのですがいくつかうまく表示されていません。 解決法 画像サイズを小さくする。 </image></image>…

Alibaba Cloud OSSでリサイズされた画像を取得する方法

例えば3000x1500の画像を400x200にして返すようにします。 イメージ処理から新しいスタイルを作成します。 固定幅とオートフィット高さを選択したら可変高さとなります。 これだけです。あとは画像のURLにパラメーターとしてドメイン名/sample.jpg?x-oss-pro…

react-nativeからalibaba cloud OSSにファイルをアップロードする

react-nativeからOSSにファイルをアップロードする方法を調べました。 イメージしやすいようにアップロード画面のスクショを貼っておきます。Sendボタンを押したらアップロードされます。 なお、画像の選択にはreact-native-image-pickerを使っています。 選…

OSSにbase64エンコードされた画像を保存する

base64の画像データをOSSに保存します。 これは20x20ピクセルの正方形画像をbase64エンコードしたものです。 iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACNklEQVQ4EeWTz0tUURTHP+/xnN7kZAjZkIYllpX0uxYtLBAiqIWioVAglIt+yeAigvAfaNOuRW6UIkiCIFwEQWmrC…

react-native + auth0でSomething went wrongが出る

react-native + auth0を使ったときログイン画面に飛ばずにSomething went wrongとだけ表示されてログにも何も出ない現象で困りました。 解決法 アプリのパッケージ名にアンダースコア(_)が入っているとダメみたいです。作り直したら無事できるようになりまし…

error: cannot find symbol import com.reactnativenavigation.NavigationReactPackage;

react-native-navigationをビルドした時に失敗したのでその解決法をメモします。 /Users/asmsuechan/src/my_mobile/android/app/src/main/java/com/my_mobile/MainApplication.java:6: error: cannot find symbol import com.reactnativenavigation.Navigati…

react-nativeでPinterestみたいなUIを実現する

Pinterestの2カラムで高さ可変のUIをreact-nativeで作ります。 目標としたUI このレイアウトはMansoryといいます。 できたUI ライブラリ Mansoryレイアウトを実現するJSのライブラリはいくつかあって、Packery、Mansory.js、Bricks.jsなどが有名です。しかし…

AliEaters meetup #6 に参加した

8/29にあった Alibaba Cloud Developers Meetup #6に参加しました。 togetterにまとめがあります。これを見たら雰囲気はわかると思います。 8/29 AliEaters Meetup#6 - Togetter 会場は霞が関にあるWeWork日比谷パークフロントです。行く途中に国会議事堂が…

GraphQLのミューテーションを使う

GraphQLのミューテーションはリソースを変更するものです。 実行順の問題で、argsで渡された引数を元にリソースを変更することは好ましくありません。(詳しくは公式ドキュメントに任せます) const express = require('express') const graphqlHTTP = require…

GraphQLでパラメータを投げる

最近GraphQLを使っているのですがリクエストにパラメータを乗せるのに四苦八苦したのでメモしておきます。 const express = require('express') const graphqlHTTP = require('express-graphql') const { graphql, GraphQLSchema, GraphQLObjectType, GraphQ…

ApsaraDB for RDSへのマイグレーション

sequelizeを使ってApsaraDB for RDSにマイグレーションを流します。 ApsaraDB for RDSはちょっとお金がかかって、日本リージョンは1日120円くらいです。1ヶ月だと4000円ですね。個人利用だと地味に効いてくる値段です。 準備 準備として以下を行います。多分…

Function Compute + API GatewayでGraphQLのAPIを作成する

アリババクラウドのFunction Compute + API Gatewayの構成のAPIでGraphQLを使います。 GraphQLとは エンドポイントごとに機能を持たせるのではなく、一つのエンドポイントに命令をPOSTしてその結果を得るようにしたものです。 具体例だとこんな感じになりま…

Function Compute + API GatewayでPOSTのエンドポイントを作る

アリババクラウド のFunction Compute + API GatewayでPOSTのエンドポイントを作ってリクエストボディを拾うのが大変でした。 今回のソースコード // index.js const atob = require('atob'); const createMessage = (parameters) => { // データを保存する…

Function Computeの自動テスト

Function Computeに対するテストはfc-helperのtestを使って行います。 ここではアクセスがあったらhello world!\nというbodyと200のステータスを返すエンドポイントを想定します。 // index.js const { hook } = require('fc-helper'); exports.handler = ho…

serverless frameworkを使ってFunction ComputeとAPI Gatewayにデプロイする

serverlessを使う github.com serverlessはlambdaなどの各サービスの上へ簡単にサーバレスなアプリケーションを作成/デプロイできるCLIツールです。ロゴがカッコいいですね。 serverlessのプラグインとしてアリババクラウドが出しているserverless-aliyun-fu…

タイムトリガーでFunction ComputeからSlackに投稿する

やること この記事ではFunction ComputeからSlackに投稿する最小のコードを紹介します。 関数、トリガーの作成 まずFunction Computeでタイムトリガーの関数を作成します。 以下のコードがFunction ComputeからSlackに現在時刻を投稿する最小の(多分)コード…