In commemoration of the 100th follower milestone, Blog Application and Multilingualization

In commemoration of the 100th follower milestone, Blog Application and Multilingualization

The other day, two days before the end of January, we successfully achieved our goal of 100 followers on Instagram and Twitter for the end of January🎊!

Thank you so much for reading our blog, DEKOBOKO FRIENDS!

 

As I was planning to do something to commemorate the occasion, I saw and heard about “web apps” from IT specialist Mitta.

I thought, wouldn’t it be great if I could “appify” my blog as well? So I came up with the idea of implementing a website like an app.

 

Recently, I started to pursue various things about websites, and when I was analyzing the data in Google Analytics, I was surprised by the results!

 

Top 5 visitor ranking by city and ward

1st Osaka

2nd Clarksville

3rd Yokohama

4th Ichikawa

5th Bowling Green

As of February 7, 2022

 

We noticed a surprisingly large number of visitors from the U.S. and demand for English.

About 25% of the total users, or about a quarter of the total users, were from overseas.

 

Therefore, I decided to try to “multilingualize” my blog.

 

In this article, I’ll start with the basics of what an app is. In this article, I would like to introduce the basics of what an app is, how to browse with it, and how to switch languages.

 

What is an app?

The word “app” that we often hear in our daily lives is an abbreviation for “application,” meaning software that is installed on an OS and used in general. Whenever we use a smartphone, computer, or tablet to do something, we are running some kind of application to do the work.

OS: Operating System (basic software)

 

When it comes to operating systems for personal computers.

Microsoft’s “Windows” and Apple’s “Mac” OS

 

When it comes to smartphone operating systems

Apple’s “iOS” for iPhone and

Google’s “Android” is the mainstream OS.

 

Basically, there are two types of applications.

Native apps” that you install and use

Web apps” that do not require installation.

In addition, a new type of web technology called “PWA” has been gaining attention in recent years.

 

PWA is an innovative system announced by Google that combines the excellent characteristics of native apps and web apps!

 

I will now explain the characteristics of each.

Native Apps

Native applications are those that you download and use on your PC or smartphone.

They can be used even when they are not connected to the Internet (with some exceptions).

 

Typical examples :

Excel, Word, PowerPoint, etc. often used at school or work

Design software (Adobe Illustrator, Photoshop, etc.)

Anything you install from the App Store or Google Play.

 

Development languages :

C language, C++, C#, VisualBasic, ASP

 

Advantages of native apps

– Can be used in an offline environment
– Fast loading speed and comfortable operation
– In-app billing
– Push notifications

Disadvantages

– Strict review before release
– High development cost
– Time consuming to download
– WEB Apps

What is a web app?

Web application is an application that runs in a web browser.

You need to be connected to the Internet to view them.

 

Typical examples :

In the gourmet food industry, sites such as Shokuroku, Cookpad, Gurunavi, etc.

EC sites such as Amazon and Rakuten

Gmail, YouTube, and Google Maps from Google.

SNS: Instagram, Twitter, Facebook

Yahoo!, note, Dropbox, and Skype.

 

Development languages :

Ruby, PHP, Python, Go language, Java, JavaScript, HTML, CSS

HTML, CSS

 

Advantages of web applications

– Development cost can be reduced.
– Can be used regardless of device or OS.
– No installation required, saving gigabytes.
– No need to update on the user side.

Disadvantages of web apps

– No notification
– Vulnerability in terms of security
– Cannot be used without an internet environment
– Web application environment is affected by performance

PWA” recommended by Google

What is a PWA, which is a fusion of the two applications described above, and is a combination of the ease of a website and the high functionality of a native application?

 

The official name  …  Progressive  Web  Apps

A technology that makes it possible to install a website/web app as an app like a native app.

 

With PWAs, you can put icons on your home screen, send push notifications, and implement “user-friendly and convenient functions” without having to use native apps ✨.

To put it simply, it’s like “turning a website into an app“.

 

To quote Google’s official website.

Using Progressive Web Apps

Progressive Web Apps (PWAs) allow you to quickly interact with the web on your computer or mobile device, install PWAs for easy access, and take advantage of additional features (such as extra storage for offline content).

 

Typical examples :

Retty, SUUMO, Twitter, Nikkei E-Edition, Spotify, Forbes JAPAN, The Weather Channel, Pinterest, The Washington Post

 

Development Languages :

HTML, CSS, JavaScript

Working with “ServiceWorker”

ServiceWorker continues to run in the background even when tabs are closed.

 

Five advantages of PWAs

(1) Icon placement on the smartphone home screen

Push notifications can be used.

(2) Push notifications are available

(3) Site browsing while offline

(4) Display splash screen when loading

(5) Full screen display of web pages

I have the impression that more and more companies are gradually adopting PWAs.

 

The weak point of PWAs is that push notifications are not yet supported on iOS💦.

If it is supported in the future, it will surely spread to the whole world at once!

PWA will change the way the web and apps work, and the conventional wisdom.

I think it will be a big turning point.

How do you compare the three apps on Instagram?

If you look at Instagram on your iPhone, you may think there is nothing wrong with it.

However, when you look at it on your iPad, have you ever found it a bit inconvenient?

 

In fact, let’s compare it with an example of Instagram on an iPad!

 

[Native App]

ネイティブアプリのインスタグラム

When you view it horizontally on an iPad, you have to turn the screen upright to see it at the size of a smartphone…it’s small and hard to see…you also get a little blank space.

 

[Web App]

WEBアプリのインスタグラム

There is a search bar at the top.

I can’t see it with the screen fully open…

 

[PWA]

PWAのインスタグラム

I’ve been using it for a while now, and it’s really nice.

If you want to view Instagram on your iPad, I suggest you convert it to a PWA!

Turning a website into an app

Chrome(PC)

First thing on any search engine, search the URL for [DEKOBOKO FRIENDS]!

 

You can bookmark (register as a favorite) sites you frequently visit with a star mark, but it would be more convenient if you could add them to your home screen as an app!

 

How to install the application

❶ Click on the icon next to the URL of the website in the search window that looks like a combination of a computer and the bottom arrow.

When you place the cursor over the icon, the message “Install DEKOBOKO FRIENDS” will appear.

Chromeアプリインストール方法1

 

❷Install the software.

Chromeアプリインストール方法2

 

❸The “PWA-ized application” has been launched!

Chromeアプリインストール方法3

The bar on top is gone, so it’s clean!

 

Returning to the home screen…

When you return to the home screen, you’ll see that DEKOBOKO FRIENDS app has been created☺.

Chromeアプリインストール方法4

What a website! The website has turned into an app!

When I opened the website from the home screen again, it was instantly up and running!

Edge(PC)

Follow the same procedure as Chrome.

You can convert a website into an application in Edge as well.

However, the shape of the symbol is different from Chrome.

Note that it has been changed to an icon with three squares and a + button!

Edgeアプリインストール1

Once you install it, allow it!

You can customize the ✓ by yourself if you like.

Edgeアプリインストール2

If you check Desktop Shortcut, it will be added to your home screen as an app as before.

iPad

Open a web site by searching the URL in Safari.

 

Share symbol that pops up at the top => Add to Home Screen

iPad1

Add

iPad2

The DEKOBOKO FRIENDS app has been added to your iPad!

iPad3

This is the reason why there are two apps for Instagram as well. It’s your imagination that the colors are slightly different!

 

The native app and the app that was made into a PWA are side by side, so it’s too much.

It may look suspicious, but… it’s not a back-up (laughs).

It’s just an app of Instagram opened on a website!

If you look closely, Lightroom actually has two apps as well.

 

If you look closely, you’ll see that Lightroom actually has two apps, one for viewing, one for editing the admin screen (dashboard), and one for analyzing. You can even change the name for each use!

iPhone

You can also change the name for each use. First, search the URL in Safari.

Then, to add it to your home screen, click the share button with the up arrow that pops up.

iPhoneアプリ1

Add to Home Screen

iPhoneアプリ2

Add

iPhoneアプリ3

The DEKOBOKO FRIENDS app has been added ♥.

iPhoneアプリ4

 

Push Notifications

If you turn on push notifications, you will receive notifications of newly posted articles and notifications from the blog owner. This has the advantage of making it easier for you to notice new posts when you want to see them.

There are various browsers and models that support push notifications.

Browsers that support push notifications
Chrome (Desktop & Android)
Safari (Mac OS X)
Microsoft Edge (Desktop & Android)
Opera (Desktop & Android)
Firefox (Desktop & Android)
Both HTTP and HTTPS sites are supported.

* Push notifications are not supported for iPhone.

How to set up push notifications is explained below.

PC (Chrome & Edge & PWA)

❶ Allow

プッシュ通知1

❷ Allow

プッシュ通知2

❸ Press the red bell.

プッシュ通知3

If you get a notification at the bottom, OK.

プッシュ通知4

Android

Push notifications seem to be possible on smartphones, even on Android!

android通知許可

android通知

Making the Blog Multilingual

How to change the display to English

If you are using a PC, you can change the language to English by clicking on the English button.

englishの位置

If you are using an iPad, you can view the blog in the same way as on a PC.

So, here is the bottom part of the screen for your reference.

english5

If you are using an iPhone, the upper bar is within the three lines of a round circle, so please click on English from there.

english1

english2

english3

I also added a language switcher not only in the header at the top of the site, but also in the footer at the bottom.

You can switch between English and Japanese.

 

If you are an English-speaking person, please use this site as a website to read in your own language, or to learn a foreign language other than your own.

DeepL Translation

I thought about using an automatic translation plugin for WordPress, but I was told that it uses Google and Microsoft translations.

If the accuracy is good, there is room to consider it.

 

However, “DeepL” has recently surpassed them and can provide native-like natural translations.

DeepL translation: the world’s most accurate translation tool

 

In order to meet the needs of a wide range of users so that people from overseas can read our website, we have decided to incorporate “DeepL”, which provides excellent, highly accurate automatic translation.

How far will translation technology go in 2022? The evolution of “DeepL” over Google Translate

 

I’ll be translating manually, but I’ll do my best to translate steadily in my free time!

 

I will also create an English translated article page, and will add articles in other languages if there is enough demand and capacity.

 

Without forgetting the original purpose of running DEKOBOKO FRIENDS, we aim to create a website that provides useful and fun information to people around the world.

 

We hope that everyone will try to convert the website into a PWA and turn it into an application so that you can view DEKOBOKO FRIENDS at any time♪